/* =============================================================
   TGIT — Blog Archive + Single Post
   Light colour scheme matching tgit-cards.css token system
   ============================================================= */

/* Inherits :root tokens from tgit-cards.css:
   --tgit-bg, --tgit-bg-page, --tgit-bg-subtle, --tgit-border,
   --tgit-border-mid, --tgit-ink, --tgit-ink-soft, --tgit-ink-muted,
   --tgit-gold, --tgit-gold-light, --tgit-gold-hover,
   --tgit-shadow-sm, --tgit-shadow-md, --tgit-shadow-lg,
   --tgit-radius-card, --tgit-radius-btn, --tgit-radius-pill
*/

/* =============================================================
   1. BLOG ARCHIVE HERO
   ============================================================= */
.tgit-blog-hero {
    position:    relative;
    min-height:  60vh;
    display:     flex;
    align-items: center;
    overflow:    hidden;
}
.tgit-blog-hero__bg { position: absolute; inset: 0; }
.tgit-blog-hero__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 35%;
    display: block;
}
.tgit-blog-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        135deg,
        rgba(15,10,3,0.78) 0%,
        rgba(15,10,3,0.55) 50%,
        rgba(15,10,3,0.35) 100%
    );
}
.tgit-blog-hero__inner {
    position:  relative;
    z-index:   10;
    max-width: 760px;
    width:     100%;
    margin:    0 auto;
    padding:   6rem 1.5rem 4rem;
    text-align: center;
}
@media (min-width: 1024px) { .tgit-blog-hero__inner { padding: 7rem 2rem 5rem; } }

.tgit-blog-hero__eyebrow {
    display:        inline-flex;
    align-items:    center;
    gap:            0.375rem;
    font-size:      0.7rem;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          #F5C96A;
    margin-bottom:  0.75rem;
}
.tgit-blog-hero__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   clamp(2.25rem, 5vw, 4rem);
    font-weight: 700;
    color:       #FFFDF7;
    line-height: 1.1;
    margin:      0 0 1rem;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
.tgit-blog-hero__desc {
    font-size:   1rem;
    color:       rgba(255,245,220,0.72);
    max-width:   48ch;
    margin:      0 auto 2rem;
    line-height: 1.65;
}

/* Search bar */
.tgit-blog-hero__search { width: 100%; }
.tgit-blog-hero__search-wrap {
    position:      relative;
    display:       flex;
    align-items:   center;
    max-width:     520px;
    margin:        0 auto;
    background:    rgba(255,255,255,0.96);
    border-radius: var(--tgit-radius-pill);
    box-shadow:    0 4px 24px rgba(0,0,0,0.2);
    overflow:      hidden;
}
.tgit-blog-hero__search-icon {
    position:   absolute;
    left:       1.1rem;
    color:      var(--tgit-ink-muted);
    font-size:  1rem;
    pointer-events: none;
}
.tgit-blog-hero__search-input {
    flex:        1;
    border:      none;
    outline:     none;
    padding:     0.8rem 1rem 0.8rem 2.8rem;
    font-size:   0.875rem;
    color:       var(--tgit-ink);
    background:  transparent;
}
.tgit-blog-hero__search-input::placeholder { color: var(--tgit-ink-muted); }
.tgit-blog-hero__search-btn {
    padding:       0.6rem 1.25rem;
    margin:        0.25rem;
    background:    var(--tgit-gold);
    color:         #fff;
    border:        none;
    border-radius: var(--tgit-radius-pill);
    font-size:     0.8rem;
    font-weight:   700;
    cursor:        pointer;
    white-space:   nowrap;
    transition:    background 0.15s;
}
.tgit-blog-hero__search-btn:hover { background: var(--tgit-gold-hover); }

/* =============================================================
   2. CATEGORY FILTER TABS
   ============================================================= */
.tgit-blog-cats {
    background:    var(--tgit-bg);
    border-bottom: 1px solid var(--tgit-border);
    box-shadow:    0 1px 6px rgba(100,80,50,0.05);
    position:      sticky;
    top:           0;
    z-index:       40;
}
.tgit-blog-cats__inner {
    max-width:   1400px;
    margin:      0 auto;
    padding:     0 1.5rem;
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    overflow-x:  auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height:  52px;
}
.tgit-blog-cats__inner::-webkit-scrollbar { display: none; }

.tgit-blog-cat-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.3rem;
    padding:         0.35rem 0.9rem;
    border-radius:   var(--tgit-radius-pill);
    font-size:       0.78rem;
    font-weight:     600;
    color:           var(--tgit-ink-soft);
    background:      transparent;
    border:          1.5px solid transparent;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}
.tgit-blog-cat-btn:hover {
    background:   var(--tgit-bg-subtle);
    color:        var(--tgit-ink);
    border-color: var(--tgit-border-mid);
}
.tgit-blog-cat-btn.active {
    background:   var(--tgit-gold-light);
    color:        var(--tgit-gold-hover);
    border-color: rgba(200,137,26,0.35);
}
.tgit-blog-cat-btn__count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:     1.25rem;
    height:        1.25rem;
    padding:       0 0.3rem;
    background:    var(--tgit-bg-subtle);
    border-radius: var(--tgit-radius-pill);
    font-size:     0.65rem;
    font-weight:   700;
    color:         var(--tgit-ink-muted);
}
.tgit-blog-cat-btn.active .tgit-blog-cat-btn__count {
    background: rgba(200,137,26,0.2);
    color:      var(--tgit-gold-hover);
}

/* =============================================================
   3. ARCHIVE WRAPPER
   ============================================================= */
.tgit-blog-archive {
    background: var(--tgit-bg-page);
    padding:    3rem 0 5rem;
}
.tgit-blog-archive__inner {
    max-width: 1400px;
    margin:    0 auto;
    padding:   0 1.5rem;
}
@media (min-width: 1024px) { .tgit-blog-archive__inner { padding: 0 2.5rem; } }

/* =============================================================
   4. FEATURED POST
   ============================================================= */
.tgit-blog-featured {
    display:       grid;
    grid-template-columns: 1fr;
    gap:           0;
    background:    var(--tgit-bg);
    border:        1px solid var(--tgit-border);
    border-radius: var(--tgit-radius-card);
    overflow:      hidden;
    box-shadow:    var(--tgit-shadow-md);
    margin-bottom: 2.5rem;
    transition:    box-shadow 0.22s;
}
.tgit-blog-featured:hover { box-shadow: var(--tgit-shadow-lg); }

@media (min-width: 768px) {
    .tgit-blog-featured { grid-template-columns: 1.1fr 1fr; }
}

.tgit-blog-featured__img-wrap {
    position:        relative;
    display:         block;
    min-height:      280px;
    overflow:        hidden;
    background:      var(--tgit-bg-subtle);
    text-decoration: none;
}
@media (min-width: 768px) { .tgit-blog-featured__img-wrap { min-height: 400px; } }

.tgit-blog-featured__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.tgit-blog-featured:hover .tgit-blog-featured__img { transform: scale(1.03); }

.tgit-blog-featured__img-placeholder {
    width: 100%; height: 100%; min-height: 280px;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--tgit-ink-muted);
}
.tgit-blog-featured__img-overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(to right, transparent 60%, rgba(255,250,240,0.15) 100%);
}

.tgit-blog-featured__body {
    padding:        2rem 1.75rem;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
}
@media (min-width: 1024px) { .tgit-blog-featured__body { padding: 2.5rem 2.25rem; } }

.tgit-blog-featured__cat {
    display:        inline-flex;
    align-items:    center;
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          var(--tgit-gold);
    text-decoration: none;
    transition:     color 0.15s;
}
.tgit-blog-featured__cat:hover { color: var(--tgit-gold-hover); }

.tgit-blog-featured__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   clamp(1.375rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.25;
    color:       var(--tgit-ink);
    margin:      0;
}
.tgit-blog-featured__title a {
    color: inherit; text-decoration: none; transition: color 0.15s;
}
.tgit-blog-featured__title a:hover { color: var(--tgit-gold); }

.tgit-blog-featured__excerpt {
    font-size:   0.9375rem;
    color:       var(--tgit-ink-soft);
    line-height: 1.65;
    margin:      0;
}

.tgit-blog-featured__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.5rem;
    font-size:   0.78rem;
    color:       var(--tgit-ink-muted);
}
.tgit-blog-featured__avatar {
    width: 28px; height: 28px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--tgit-border-mid);
}
.tgit-blog-featured__author {
    font-weight: 600; color: var(--tgit-ink-soft);
}
.tgit-blog-featured__sep { opacity: 0.4; }
.tgit-blog-featured__read {
    display: inline-flex; align-items: center; gap: 0.2rem;
}

.tgit-blog-featured__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.4rem;
    padding:         0.55rem 1.25rem;
    background:      var(--tgit-gold);
    color:           #fff;
    border-radius:   var(--tgit-radius-btn);
    font-size:       0.82rem;
    font-weight:     700;
    text-decoration: none;
    align-self:      flex-start;
    margin-top:      auto;
    transition:      background 0.15s, transform 0.1s;
}
.tgit-blog-featured__cta:hover  { background: var(--tgit-gold-hover); color: #fff; }
.tgit-blog-featured__cta:active { transform: scale(0.96); }

/* =============================================================
   5. POST GRID + CARDS  (shared: archive + related)
   ============================================================= */
.tgit-blog-grid,
.tgit-related__grid {
    display:               grid;
    grid-template-columns: repeat(1, 1fr);
    gap:                   1.375rem;
}
@media (min-width: 640px) {
    .tgit-blog-grid,
    .tgit-related__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .tgit-blog-grid,
    .tgit-related__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Post card — same tokens as tgit-pkg-card */
.tgit-post-card {
    background:     var(--tgit-bg);
    border:         1px solid var(--tgit-border);
    border-radius:  var(--tgit-radius-card);
    overflow:       hidden;
    box-shadow:     var(--tgit-shadow-sm);
    display:        flex;
    flex-direction: column;
    transition:     transform 0.22s ease, box-shadow 0.22s ease;
}
.tgit-post-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--tgit-shadow-lg);
}

.tgit-post-card__img-wrap {
    position:        relative;
    display:         block;
    aspect-ratio:    16 / 10;
    overflow:        hidden;
    background:      var(--tgit-bg-subtle);
    text-decoration: none;
}
.tgit-post-card__img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
}
.tgit-post-card:hover .tgit-post-card__img { transform: scale(1.04); }
.tgit-post-card__img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--tgit-ink-muted);
}
.tgit-post-card__cat-badge {
    position:       absolute;
    bottom:         0.65rem;
    left:           0.65rem;
    padding:        0.2rem 0.6rem;
    background:     rgba(255,255,255,0.92);
    border:         1px solid var(--tgit-border-mid);
    border-radius:  var(--tgit-radius-pill);
    font-size:      0.65rem;
    font-weight:    700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--tgit-gold-hover);
}

.tgit-post-card__body {
    padding:        1.125rem;
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            0.45rem;
}
.tgit-post-card__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.35rem;
    font-size:   0.72rem;
    color:       var(--tgit-ink-muted);
}
.tgit-post-card__meta .ti { font-size: 0.7rem; }

.tgit-post-card__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.35;
    color:       var(--tgit-ink);
    margin:      0;
}
.tgit-post-card__title a {
    color: inherit; text-decoration: none; transition: color 0.15s;
}
.tgit-post-card__title a:hover { color: var(--tgit-gold); }

.tgit-post-card__excerpt {
    font-size:   0.845rem;
    color:       var(--tgit-ink-soft);
    line-height: 1.6;
    margin:      0;
    flex:        1;
}
.tgit-post-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding-top:     0.65rem;
    border-top:      1px solid var(--tgit-border);
    margin-top:      auto;
    gap:             0.5rem;
}
.tgit-post-card__author {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
    font-size:   0.75rem;
    font-weight: 600;
    color:       var(--tgit-ink-soft);
}
.tgit-post-card__avatar {
    width:         24px;
    height:        24px;
    border-radius: 50%;
    object-fit:    cover;
    border:        1.5px solid var(--tgit-border-mid);
}
.tgit-post-card__cta {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2rem;
    height:          2rem;
    background:      var(--tgit-gold-light);
    color:           var(--tgit-gold-hover);
    border:          1px solid rgba(200,137,26,0.3);
    border-radius:   50%;
    font-size:       0.875rem;
    text-decoration: none;
    flex-shrink:     0;
    transition:      background 0.15s, color 0.15s, transform 0.1s;
}
.tgit-post-card__cta:hover  { background: var(--tgit-gold); color: #fff; }
.tgit-post-card__cta:active { transform: scale(0.9); }

/* =============================================================
   6. PAGINATION
   ============================================================= */
.tgit-blog-pagination {
    margin-top:      3rem;
    display:         flex;
    justify-content: center;
}
.tgit-blog-pagination .page-numbers {
    list-style: none; display: flex; flex-wrap: wrap;
    gap: 0.4rem; padding: 0; margin: 0;
}
.tgit-blog-pagination .page-numbers li a,
.tgit-blog-pagination .page-numbers li span {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-width:       2.25rem;
    height:          2.25rem;
    padding:         0 0.7rem;
    border:          1.5px solid var(--tgit-border-mid);
    border-radius:   var(--tgit-radius-btn);
    font-size:       0.82rem;
    font-weight:     600;
    color:           var(--tgit-ink-soft);
    text-decoration: none;
    background:      var(--tgit-bg);
    transition:      background 0.15s, border-color 0.15s, color 0.15s;
}
.tgit-blog-pagination .page-numbers li a:hover {
    background: var(--tgit-bg-subtle);
    border-color: var(--tgit-gold);
    color: var(--tgit-gold);
}
.tgit-blog-pagination .page-numbers li span.current {
    background: var(--tgit-gold); color: #fff; border-color: var(--tgit-gold);
}

/* =============================================================
   7. EMPTY STATE
   ============================================================= */
.tgit-blog-empty {
    text-align: center; padding: 5rem 1rem;
    color: var(--tgit-ink-muted);
}
.tgit-blog-empty i    { font-size: 3rem; display: block; margin-bottom: 0.875rem; }
.tgit-blog-empty h3   { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.5rem; color: var(--tgit-ink-soft); }
.tgit-blog-empty p    { font-size: 0.875rem; margin: 0 0 1.25rem; }
.tgit-blog-empty__link {
    display:         inline-flex;
    align-items:     center;
    gap:             0.35rem;
    padding:         0.5rem 1.125rem;
    background:      var(--tgit-gold-light);
    color:           var(--tgit-gold-hover);
    border-radius:   var(--tgit-radius-btn);
    font-size:       0.82rem;
    font-weight:     700;
    text-decoration: none;
    border:          1px solid rgba(200,137,26,0.3);
    transition:      background 0.15s, color 0.15s;
}
.tgit-blog-empty__link:hover { background: var(--tgit-gold); color: #fff; }

/* =============================================================
   8. SINGLE POST HERO
   ============================================================= */
.tgit-single-hero {
    position:    relative;
    min-height:  68vh;
    display:     flex;
    align-items: flex-end;
    overflow:    hidden;
}
.tgit-single-hero__bg { position: absolute; inset: 0; }
.tgit-single-hero__img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
    display: block;
    transition: transform 8s ease;
}
.tgit-single-hero:hover .tgit-single-hero__img { transform: scale(1.03); }
.tgit-single-hero__img-fallback {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #2C1F0A 0%, #5C3D18 50%, #2C1F0A 100%);
}
.tgit-single-hero__overlay {
    position:   absolute;
    inset:      0;
    background: linear-gradient(
        to bottom,
        rgba(10,6,2,0.12)  0%,
        rgba(10,6,2,0.42)  40%,
        rgba(10,6,2,0.82)  100%
    );
}
.tgit-single-hero__inner {
    position:  relative;
    z-index:   10;
    width:     100%;
    max-width: 1400px;
    margin:    0 auto;
    padding:   6rem 1.5rem 3.5rem;
}
@media (min-width: 1024px) { .tgit-single-hero__inner { padding: 7rem 2.5rem 4rem; } }

.tgit-single-hero__breadcrumb {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.3rem; font-size: 0.72rem;
    color: rgba(255,245,220,0.55);
    margin-bottom: 1rem; padding: 0; list-style: none;
}
.tgit-single-hero__breadcrumb a {
    display: inline-flex; align-items: center; gap: 0.2rem;
    color: rgba(255,245,220,0.55); text-decoration: none; transition: color 0.15s;
}
.tgit-single-hero__breadcrumb a:hover { color: #F5C96A; }

.tgit-single-hero__cat {
    display:        inline-flex;
    align-items:    center;
    font-size:      0.68rem;
    font-weight:    700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          #F5C96A;
    text-decoration: none;
    margin-bottom:  0.6rem;
    transition:     color 0.15s;
}
.tgit-single-hero__cat:hover { color: #fff; }

.tgit-single-hero__title {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   clamp(1.875rem, 4vw, 3.25rem);
    font-weight: 700;
    color:       #FFFDF7;
    line-height: 1.15;
    margin:      0 0 1.5rem;
    max-width:   22ch;
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

.tgit-single-hero__meta {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.75rem;
}
.tgit-single-hero__avatar {
    width: 40px; height: 40px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
}
.tgit-single-hero__meta-text { display: flex; flex-direction: column; gap: 0.2rem; }
.tgit-single-hero__meta-author {
    font-size:       0.85rem;
    font-weight:     700;
    color:           #FFFDF7;
    text-decoration: none;
    transition:      color 0.15s;
}
.tgit-single-hero__meta-author:hover { color: #F5C96A; }
.tgit-single-hero__meta-detail {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.375rem; font-size: 0.73rem; color: rgba(255,245,220,0.6);
}
.tgit-single-hero__meta-detail .ti { font-size: 0.7rem; }

/* Share buttons */
.tgit-single-hero__share {
    display:     flex;
    align-items: center;
    gap:         0.375rem;
    margin-left: auto;
}
.tgit-share-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           2.125rem;
    height:          2.125rem;
    background:      rgba(255,255,255,0.14);
    border:          1px solid rgba(255,255,255,0.2);
    border-radius:   50%;
    color:           rgba(255,245,220,0.8);
    font-size:       0.9rem;
    text-decoration: none;
    cursor:          pointer;
    backdrop-filter: blur(6px);
    transition:      background 0.15s, color 0.15s, transform 0.15s;
}
.tgit-share-btn:hover {
    background: rgba(255,255,255,0.25);
    color:      #fff;
    transform:  scale(1.1);
}

/* =============================================================
   9. SINGLE POST LAYOUT (sidebar TOC + article)
   ============================================================= */
.tgit-single-layout {
    background: var(--tgit-bg-page);
    display:    grid;
    grid-template-columns: 1fr;
    max-width:  1400px;
    margin:     0 auto;
    padding:    2.5rem 1.5rem 4rem;
    gap:        2.5rem;
}
@media (min-width: 1024px) {
    .tgit-single-layout {
        grid-template-columns: 220px 1fr;
        padding: 3rem 2.5rem 5rem;
        align-items: start;
    }
}
@media (min-width: 1280px) {
    .tgit-single-layout { grid-template-columns: 260px 1fr; }
}

/* ── TOC sidebar ── */
.tgit-single-toc {
    display: none;
    order:   2;
}
@media (min-width: 1024px) {
    .tgit-single-toc {
        display:  block;
        order:    1;
        position: sticky;
        top:      5rem;
    }
}
.tgit-single-toc__inner {
    background:    var(--tgit-bg);
    border:        1px solid var(--tgit-border);
    border-radius: var(--tgit-radius-card);
    padding:       1.25rem;
    box-shadow:    var(--tgit-shadow-sm);
}
.tgit-single-toc__heading {
    display:        flex;
    align-items:    center;
    gap:            0.35rem;
    font-size:      0.72rem;
    font-weight:    700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color:          var(--tgit-ink-muted);
    margin:         0 0 0.875rem;
    padding-bottom: 0.625rem;
    border-bottom:  1px solid var(--tgit-border);
}
.tgit-single-toc__empty {
    font-size: 0.78rem; color: var(--tgit-ink-muted); margin: 0;
}
.tgit-toc-list {
    list-style: none; padding: 0; margin: 0;
    display:    flex; flex-direction: column; gap: 0.1rem;
}
.tgit-toc-item { }
.tgit-toc-item--sub .tgit-toc-link { padding-left: 1rem; font-size: 0.775rem; }
.tgit-toc-link {
    display:         block;
    padding:         0.3rem 0.5rem;
    font-size:       0.82rem;
    font-weight:     500;
    color:           var(--tgit-ink-soft);
    text-decoration: none;
    border-radius:   0.375rem;
    line-height:     1.4;
    transition:      background 0.12s, color 0.12s;
}
.tgit-toc-link:hover { background: var(--tgit-bg-subtle); color: var(--tgit-ink); }
.tgit-toc-link.active {
    background: var(--tgit-gold-light);
    color:      var(--tgit-gold-hover);
    font-weight: 700;
}

/* ── Article ── */
.tgit-single-article { order: 1; min-width: 0; }
@media (min-width: 1024px) { .tgit-single-article { order: 2; } }

/* ── Prose content ── */
.tgit-prose {
    background:    var(--tgit-bg);
    border:        1px solid var(--tgit-border);
    border-radius: var(--tgit-radius-card);
    padding:       2rem 1.75rem;
    box-shadow:    var(--tgit-shadow-sm);
    font-size:     1rem;
    line-height:   1.8;
    color:         var(--tgit-ink);
    margin-bottom: 1.5rem;
}
@media (min-width: 768px) { .tgit-prose { padding: 2.5rem 2.25rem; } }

.tgit-prose h2 {
    font-family:  var(--tgit-font-serif, Georgia, serif);
    font-size:    1.6rem;
    font-weight:  700;
    color:        var(--tgit-ink);
    margin:       2rem 0 0.75rem;
    padding-top:  0.5rem;
    border-top:   2px solid var(--tgit-gold-light);
    line-height:  1.3;
}
.tgit-prose h3 {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   1.2rem;
    font-weight: 700;
    color:       var(--tgit-ink);
    margin:      1.75rem 0 0.5rem;
}
.tgit-prose h4 {
    font-size: 1rem; font-weight: 700;
    color: var(--tgit-ink); margin: 1.5rem 0 0.5rem;
}
.tgit-prose p  { margin: 0 0 1.25rem; }
.tgit-prose ul,
.tgit-prose ol { margin: 0 0 1.25rem 1.5rem; }
.tgit-prose li { margin-bottom: 0.375rem; }
.tgit-prose a  { color: var(--tgit-gold); text-decoration: underline; }
.tgit-prose a:hover { color: var(--tgit-gold-hover); }
.tgit-prose strong { font-weight: 700; color: var(--tgit-ink); }
.tgit-prose em     { font-style: italic; }
.tgit-prose img {
    max-width: 100%; border-radius: 0.625rem;
    margin: 1.5rem 0; display: block;
    box-shadow: var(--tgit-shadow-md);
}
.tgit-prose blockquote {
    margin:        1.5rem 0;
    padding:       1rem 1.25rem;
    border-left:   4px solid var(--tgit-gold);
    background:    var(--tgit-gold-light);
    border-radius: 0 0.5rem 0.5rem 0;
    font-style:    italic;
    color:         var(--tgit-ink-soft);
}
.tgit-prose blockquote p { margin: 0; }
.tgit-prose code {
    font-family:   monospace;
    font-size:     0.875rem;
    background:    var(--tgit-bg-subtle);
    border:        1px solid var(--tgit-border-mid);
    padding:       0.1rem 0.4rem;
    border-radius: 0.25rem;
}
.tgit-prose pre {
    background:    var(--tgit-bg-subtle);
    border:        1px solid var(--tgit-border-mid);
    border-radius: 0.5rem;
    padding:       1.25rem;
    overflow-x:    auto;
    margin:        1.25rem 0;
}
.tgit-prose pre code { background: none; border: none; padding: 0; }
.tgit-prose hr {
    border: none;
    border-top: 1.5px solid var(--tgit-border);
    margin: 2rem 0;
}
.tgit-prose table {
    width: 100%; border-collapse: collapse; margin: 1.25rem 0;
    font-size: 0.9rem;
}
.tgit-prose th {
    background: var(--tgit-bg-subtle);
    padding: 0.6rem 0.875rem;
    text-align: left; font-weight: 700;
    border: 1px solid var(--tgit-border-mid);
}
.tgit-prose td {
    padding: 0.55rem 0.875rem;
    border: 1px solid var(--tgit-border);
}
.tgit-prose tr:nth-child(even) td { background: var(--tgit-bg-page); }

/* ── Tags ── */
.tgit-single-tags {
    display:     flex;
    align-items: center;
    flex-wrap:   wrap;
    gap:         0.5rem;
    padding:     1.25rem 0;
    border-top:  1px solid var(--tgit-border);
    margin-bottom: 1.5rem;
}
.tgit-single-tags__label {
    font-size:   0.75rem;
    font-weight: 700;
    color:       var(--tgit-ink-muted);
    display:     flex;
    align-items: center;
    gap:         0.25rem;
}
.tgit-single-tag {
    display:         inline-flex;
    padding:         0.2rem 0.65rem;
    background:      var(--tgit-bg-subtle);
    border:          1px solid var(--tgit-border-mid);
    border-radius:   var(--tgit-radius-pill);
    font-size:       0.73rem;
    font-weight:     600;
    color:           var(--tgit-ink-soft);
    text-decoration: none;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}
.tgit-single-tag:hover {
    background: var(--tgit-gold-light);
    color: var(--tgit-gold-hover);
    border-color: rgba(200,137,26,0.35);
}

/* ── Author card ── */
.tgit-author-card {
    display:       flex;
    align-items:   flex-start;
    gap:           1.125rem;
    padding:       1.5rem;
    background:    var(--tgit-bg);
    border:        1px solid var(--tgit-border);
    border-radius: var(--tgit-radius-card);
    box-shadow:    var(--tgit-shadow-sm);
    margin-bottom: 1.5rem;
}
.tgit-author-card__avatar {
    width: 72px; height: 72px;
    border-radius: 50%; object-fit: cover; flex-shrink: 0;
    border: 3px solid var(--tgit-gold-light);
}
.tgit-author-card__label {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tgit-ink-muted); margin: 0 0 0.2rem;
}
.tgit-author-card__name {
    font-family:     var(--tgit-font-serif, Georgia, serif);
    font-size:       1.1rem;
    font-weight:     700;
    color:           var(--tgit-ink);
    text-decoration: none;
    display:         block;
    margin-bottom:   0.375rem;
    transition:      color 0.15s;
}
.tgit-author-card__name:hover { color: var(--tgit-gold); }
.tgit-author-card__bio {
    font-size: 0.85rem; color: var(--tgit-ink-soft);
    line-height: 1.6; margin: 0;
}

/* ── Prev/Next navigation ── */
.tgit-single-nav {
    display:    grid;
    grid-template-columns: 1fr;
    gap:        0.875rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) { .tgit-single-nav { grid-template-columns: 1fr 1fr; } }

.tgit-single-nav__item {
    display:         flex;
    flex-direction:  column;
    gap:             0.3rem;
    padding:         1rem 1.125rem;
    background:      var(--tgit-bg);
    border:          1px solid var(--tgit-border);
    border-radius:   var(--tgit-radius-card);
    text-decoration: none;
    transition:      border-color 0.15s, box-shadow 0.15s;
}
.tgit-single-nav__item:hover {
    border-color: var(--tgit-gold);
    box-shadow:   var(--tgit-shadow-md);
}
.tgit-single-nav__item--next { text-align: right; }

.tgit-single-nav__dir {
    display:     inline-flex;
    align-items: center;
    gap:         0.25rem;
    font-size:   0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:       var(--tgit-gold);
}
.tgit-single-nav__title {
    font-size:   0.875rem;
    font-weight: 600;
    color:       var(--tgit-ink);
    line-height: 1.4;
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ── Comments wrapper ── */
.tgit-single-comments {
    background:    var(--tgit-bg);
    border:        1px solid var(--tgit-border);
    border-radius: var(--tgit-radius-card);
    padding:       1.75rem;
    box-shadow:    var(--tgit-shadow-sm);
}

/* =============================================================
   10. RELATED POSTS SECTION
   ============================================================= */
.tgit-related {
    background: var(--tgit-bg-subtle);
    padding:    3.5rem 0 4rem;
    border-top: 1px solid var(--tgit-border);
}
.tgit-related__inner {
    max-width: 1400px; margin: 0 auto; padding: 0 1.5rem;
}
@media (min-width: 1024px) { .tgit-related__inner { padding: 0 2.5rem; } }

.tgit-related__heading {
    font-family: var(--tgit-font-serif, Georgia, serif);
    font-size:   1.5rem;
    font-weight: 700;
    color:       var(--tgit-ink);
    margin:      0 0 1.75rem;
    display:     flex;
    align-items: center;
    gap:         0.5rem;
}
.tgit-related__heading .ti { color: var(--tgit-gold); }

/* =============================================================
   11. READING PROGRESS BAR
   ============================================================= */
.tgit-read-progress {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    height:     3px;
    background: var(--tgit-border);
    z-index:    9999;
}
.tgit-read-progress__bar {
    height:     100%;
    width:      0;
    background: linear-gradient(to right, var(--tgit-gold), #E5B643);
    transition: width 0.1s linear;
}

/* =============================================================
   12. REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .tgit-post-card,
    .tgit-post-card__img,
    .tgit-blog-featured,
    .tgit-blog-featured__img,
    .tgit-single-hero__img { transition: none; }
}