/*************************
**  Our Tasmania Website
**  News blog styles sheet
**  Build V. 0.2
**  Build Notes: the elements that relate to the news blog components of the site dark build
**
**********************/



/* ═══════════════════════════════════════════════════════
        NEWS SECTION
═══════════════════════════════════════════════════════ */
.news-section {
    padding: 4rem 0 5rem;
    background: var(--bg-2);
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

/* ── list items (left col) ── */
.news-list-link { text-decoration: none; display: block; }
.news-list-item {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--bg-card); border: 1px solid transparent;
    border-radius: var(--radius-lg); padding: .85rem; overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.news-list-link:hover .news-list-item {
    border-color: var(--emerald-rule); transform: translateX(3px);
}
.news-list-img {
    width: 90px; height: 120px; border-radius: var(--radius);
    overflow: hidden; flex-shrink: 0;
}
.news-list-img img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.1); transition: var(--easing-std);}

a:hover .news-list-img img{transform: scale(1.2); transition: var(--easing-std);}
.news-list-content { flex: 1; min-width: 0; }
.news-list-meta {
    display: flex; align-items: center;
    justify-content: space-between; margin-bottom: .35rem;
    gap: .5rem; flex-wrap: wrap;
}
.news-list-meta-author {
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .08em; color: var(--ink-3);
    display: flex; align-items: center; gap: .3rem;
}
.news-list-date-badge {
    background: var(--bg-2);
    border: 1px solid var(--emerald-rule);
    border-radius: var(--radius);
    color: var(--emerald);
    padding: 5px;
    border-radius: 8px;
    text-align: center;
    line-height: 1.1;
    min-width: 45px;
    flex-shrink: 0;
    margin-left: auto;
    align-self: center;
    transition: all 0.3s ease;
}
.news-list-date-badge .day {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
}
.news-list-date-badge .month {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.news-list-date {
    font-family: var(--font-mono); font-size: .62rem;
    color: var(--emerald); white-space: nowrap;
}
.news-list-title {
    font-family: var(--font-display); font-size: .95rem;
    font-weight: 700; color: var(--ink); line-height: 1.3; margin-bottom: .8rem;
    text-transform: capitalize;
}
.news-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag-chip {
    font-family: var(--font-mono); font-size: .58rem;
    letter-spacing:.1em; text-transform:uppercase;
    padding:.4rem .6rem .2rem .6rem; margin: 2px; border-radius:100px;
    background: rgb(255 255 255 / 12%); color: var(--ink-2);
    border-radius: 100px;
    text-decoration: none; transition: all ease .2s
}

.tag-chip:hover,.tag-chip.active { color:var(--emerald); background:var(--emerald-dim); }
/* ── featured news cards (mid/right cols) ── */
.news-card-link { text-decoration: none; display: block; height: 100%; }
.news-card {
    border-radius: var(--radius-lg); overflow: hidden;
    background: var(--bg-card);
    height: 100%; min-height: 380px;
    position: relative;
    transition: transform .3s, box-shadow .3s;
}
.news-card-link:hover .news-card {
    transform: translateY(-4px);
    box-shadow: 0 24px 56px rgba(0,0,0,.55) ;
}

/* Full-bleed image */
.news-card__img-wrap {
    position: absolute; inset: 0; overflow: hidden;
}
.news-card__img-wrap img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.25,.46,.45,.94);
}
.news-card-link:hover .news-card__img-wrap img { transform: scale(1.07); }

/* Gradient veil over image */
.news-card__img-wrap::after {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(to top,
            rgba(0,0,0,.95)  0%,
            rgba(0,0,0,.6)  45%,
            rgba(0,0,0,.15) 70%,
            transparent     100%),
        linear-gradient(to bottom,
            rgba(0,0,0,.5)  0%,
            transparent     25%);
}

/* Date badge — top right */
.news-card__date {
    position: absolute; top: .85rem; right: .85rem; z-index: 2;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--emerald-rule);
    color: var(--emerald);
    font-family: var(--font-mono); font-size: .65rem;
    letter-spacing: .08em;
    padding: .3rem .75rem; border-radius: var(--radius);

    text-align: center;
}
.news-card__date .day {
    display: block;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 700;
}
.news-card__date .month {
    display: block;
    width: 100%;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* Body overlaid at bottom */
.news-card__body {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: 1.4rem 1.2rem 1.2rem;
    display: flex; flex-direction: column;
}
.news-card__author {
    font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em;
    color: rgba(255,255,255,.5); margin-bottom: .5rem;
    display: flex; align-items: center; gap: .35rem;
}
.news-card__title {
    font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
    color: #fff; line-height: 1.25; margin-bottom: .85rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.news-card__tags { display: flex; flex-wrap: wrap; gap: .35rem; }





/* ═══ FEATURED HERO GRID ════════════════════════════════════════════════════ */
.bl-featured { padding:3rem 0 0; }
/* Fixed height on the grid — both cards always match regardless of image size */
.bl-featured__grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; height:720px; }
@media(max-width:991px) { .bl-featured__grid { height:340px; } }
@media(max-width:767px) { .bl-featured__grid { grid-template-columns:1fr; height:auto; } }
@media(max-width:767px) { .bl-featured__grid .feat-card { height:280px; } }
/* height:100% fills the grid row — no aspect-ratio needed */
.feat-card { position:relative; border-radius:var(--radius-xl); overflow:hidden; display:block; text-decoration:none; transition:border-color .3s, transform .3s, box-shadow .3s; height:100%; }
.feat-card:hover { border-color:var(--amber-rule); transform:translateY(-4px); box-shadow:0 24px 56px rgba(0,0,0,.55); }
.feat-card__img { position:absolute; inset:0; width:100%; height:100%; }
.feat-card__img img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .6s ease; }
.feat-card:hover .feat-card__img img { transform:scale(1.06); }
.feat-card__veil { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 45%, rgba(0,0,0,.05) 70%, transparent 100%); }
.feat-card__top { position:absolute; top:.9rem; left:.9rem; right:.9rem; display:flex; justify-content:space-between; align-items:flex-start; z-index:1; }
.feat-card__cat-badge { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.75); padding: .29rem .65rem .11rem; border-radius:100px; display:inline-flex; align-items:center; gap:.3rem; }
/* .feat-card__date-badge replaced by .news-list-date-badge */
.feat-card__body { position:absolute; bottom:0; left:0; right:0; z-index:1; padding:1.5rem 1.25rem 1.25rem; }
.feat-card__title { font-family:var(--font-display); font-size:1.3rem; font-weight:700; color:#fff; line-height:1.2; margin-bottom:.5rem; text-shadow:0 2px 10px rgba(0,0,0,.4); }
.feat-card--secondary .feat-card__title { font-size:1.05rem; }
.feat-card__meta { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; color:rgba(255,255,255,.45); }
.feat-card__meta-dot { color:var(--amber-rule); }
.feat-card__cta { display:inline-flex; align-items:center; gap:.4rem; margin-top:.85rem; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--amber); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.feat-card:hover .feat-card__cta { opacity:1; transform:translateY(0); }
.feat-card__cta-arrow { width:22px; height:22px; border-radius:50%; border:1px solid var(--amber-rule); background:transparent; display:flex; align-items:center; justify-content:center; font-size:.6rem; transition:background .2s; }
.feat-card:hover .feat-card__cta-arrow { background:var(--amber); border-color:var(--amber); color:#fff; }

/* ═══ POST GRID ═════════════════════════════════════════════════════════════ */
.bl-grid { padding:3rem 0 5rem; }
.bl-grid__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media(max-width:991px) { .bl-grid__grid { grid-template-columns:repeat(2,1fr); } }
@media(max-width:575px)  { .bl-grid__grid { grid-template-columns:1fr; } }
.post-card { display:flex; flex-direction:column; background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden; text-decoration:none; transition:border-color .25s, transform .25s, box-shadow .25s; }
.post-card:hover { border-color:var(--emerald-rule); transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.4); }
.post-card__img-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; }
.post-card__img-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
.post-card:hover .post-card__img-wrap img { transform:scale(1.07); }
.post-card__cat-badge { position:absolute; top:.7rem; left:.7rem; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); padding: .26rem .55rem .10rem; border-radius:100px; display:inline-flex; align-items:center; gap:.3rem; }
.post-card__date-badge { position:absolute; top:.7rem; right:.7rem; font-family:var(--font-mono); font-size:.56rem; letter-spacing:.08em; background:rgba(0,0,0,.6); backdrop-filter:blur(6px); border:1px solid var(--amber-rule); color:var(--amber); padding:.18rem .55rem; border-radius:100px; }
.post-card__body { padding:1.1rem; flex:1; display:flex; flex-direction:column; }
.post-card__title { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:.5rem; flex:1; transition:color .2s; }
.post-card:hover .post-card__title { color:var(--emerald-lt); }
.post-card__excerpt { font-size:.78rem; color:var(--ink-2); line-height:1.65; margin-bottom:.85rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-card__footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--rule); padding-top:.75rem; margin-top:auto; }
.post-card__byline { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.07em; color:var(--ink-3); display:flex; align-items:center; gap:.35rem; }
.post-card__read { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.07em; color:var(--ink-4); }

/* Empty state */
.bl-empty { grid-column:1/-1; text-align:center; padding:5rem 1rem; }
.bl-empty i { font-size:2.5rem; color:var(--ink-4); margin-bottom:1.25rem; display:block; }
.bl-empty__title { font-family:var(--font-display); font-size:1.2rem; color:var(--ink-2); margin-bottom:.5rem; }
.bl-empty__text { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; color:var(--ink-4); }

/* ═══ SIDEBAR ═══════════════════════════════════════════════════════════════ */
.bl-sidebar { padding-left:1.5rem; }
@media(max-width:991px) { .bl-sidebar { padding-left:0; margin-top:2.5rem; } }
.sidebar-widget { background:var(--bg-card); border-radius:var(--radius-lg); padding:1.25rem; margin-bottom:1.25rem; }
.sidebar-widget__title { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--emerald); margin-bottom:1rem; display:flex; align-items:center; gap:.5rem; }
.sidebar-widget__title::after { content:''; flex:1; height:1px; background:var(--rule); }
.sidebar-post { display:flex; gap:.75rem; align-items:flex-start; text-decoration:none; padding:.6rem 0; border-bottom:1px solid var(--rule); transition:opacity .2s; }
.sidebar-post:last-child { border-bottom:none; padding-bottom:0; }
.sidebar-post:hover { opacity:.7; }
.sidebar-post__thumb { width:52px; height:52px; border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
.sidebar-post__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sidebar-post__title { font-family:var(--font-display); font-size:.8rem; font-weight:600; color:var(--ink); line-height:1.3; margin-bottom:.2rem; }
.sidebar-post__date { font-family:var(--font-mono); font-size:.6rem; color:var(--ink-4); }

/* Category list rows */
.sidebar-cat { display:flex; align-items:center; gap:.75rem; padding:.55rem 0; border-bottom:1px solid var(--rule); text-decoration:none; transition:opacity .2s; }
.sidebar-cat:last-child { border-bottom:none; }
.sidebar-cat:hover { opacity:.7; }
.sidebar-cat__icon { width:30px; height:30px; border-radius:var(--radius); background:var(--emerald-dim); display:flex; align-items:center; justify-content:center; color:var(--emerald); font-size:.7rem; flex-shrink:0; }
.sidebar-cat__label { font-size:.82rem; color:var(--ink-2); font-family:var(--font-body); flex:1; }
.sidebar-cat__count { font-family:var(--font-mono); font-size:.6rem; color:var(--ink-4); margin-right:.25rem; }

/* Active tag notice */
.tag-notice { display:flex; align-items:center; justify-content:space-between; gap:.75rem; background:var(--emerald-dim); border:1px solid var(--emerald-rule); border-radius:var(--radius); padding:.6rem 1rem; margin-bottom:1.5rem; font-family:var(--font-mono); font-size:.68rem; color:var(--emerald-lt); letter-spacing:.04em; }
.tag-notice a { color:var(--emerald); text-decoration:none; font-size:.62rem; }
.tag-notice a:hover { color:var(--ink); }

/* ═══ DATE BADGE (matches news-list style) ══════════════════════════════════ */
.news-list-date-badge {
    background: var(--bg-2);
    border: 1px solid var(--emerald-rule);
    border-radius: 8px;
    color: var(--emerald);
    padding: 5px;
    text-align: center;
    line-height: 1.1;
    min-width: 45px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.news-list-date-badge .day  { display:block; font-size:.7rem; font-weight:700; }
.news-list-date-badge .month { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.5px; }
/* .news-list-date is already defined identically further up. */

/* ═══ CATEGORY COUNT TITLE (matches splist-count-title style) ══════════════ */
.bl-count-title { font-family:var(--font-mono); font-size:.62rem; font-weight:400; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.35rem; display:flex; align-items:center; gap:.4rem; }
.bl-count-title i { font-size:.58rem; }

/* ═══ FILTER BAR (matches species-list style) ═══════════════════════════════ */
.filter-bar { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.filter-bar__label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-4); margin-right:.25rem; white-space:nowrap; }
.filter-pill {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    font-family:var(--font-mono);
    font-size:.62rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    text-decoration:none;
    /*padding: .36rem .85rem .24rem;*/
    border-radius:100px;
    color:var(--ink-3);
    background:var(--parchment-dim);
    cursor:pointer;
    transition:color .2s, background .2s;
    white-space:nowrap;
}
.filter-pill:hover { border-color:var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }
.filter-pill.active { background:var(--emerald-dim); border-color:var(--emerald-rule); color:var(--emerald); }
.filter-pill--all.active { background:var(--emerald-dim); border-color:transparent; color:var(--ink-2); }
.filter-pill i { font-size:.58rem; }

/* ═══ PAGINATION ════════════════════════════════════════════════════════════ */
.bl-pagination { display:flex; align-items:center; gap:.4rem; margin-top:2.5rem; justify-content:center; }
.bl-page-btn { width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); border: 1px solid transparent; font-family:var(--font-mono); font-size:.75rem; color:var(--ink-2); text-decoration:none; background:var(--bg-card); transition:border-color .2s, color .2s, background .2s; }
.bl-page-btn:hover { border-color:var(--emerald-rule); color:var(--emerald); background:var(--emerald-dim); }
.bl-page-btn.active { background:var(--emerald); border-color:var(--emerald); color:#fff; pointer-events:none; }
.bl-page-btn.disabled { opacity:.3; pointer-events:none; }


/* ── Date badge ── */
.news-list-date-badge { background:var(--bg-2); border:1px solid var(--emerald-rule); border-radius:8px; color:var(--emerald); padding:5px; text-align:center; line-height:1.1; min-width:45px; flex-shrink:0; transition:all .3s ease; }
.news-list-date-badge .day   { display:block; font-size:.7rem; font-weight:700; }
.news-list-date-badge .month { display:block; font-size:.6rem; text-transform:uppercase; letter-spacing:.5px; }



/* Breadcrumb in hero */
.art-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--white); margin-bottom:1.25rem; }
.art-breadcrumb a { color:var(--ink-2); text-decoration:none; transition:color .15s; }
.art-breadcrumb a:hover { color:var(--emerald); }
.art-breadcrumb__sep { color:var(--ink-2); }

/* Hero meta */
.art-hero__meta { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-bottom:1rem; }
.art-hero__cat { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; background:var(--emerald-dim); color:var(--emerald); padding:.25rem .75rem; border-radius:100px; }
.art-hero__date { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--white); display:inline-flex; align-items:center; gap:.35rem; }
.art-hero__read { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; color:var(--white); display:inline-flex; align-items:center; gap:.35rem; }

/* Hero title + excerpt */
.art-hero__title { font-size:clamp(1.75rem,6vw,4.5rem); font-weight:800; letter-spacing:-.025em; line-height:1.1; color:var(--ink); margin-bottom:1rem; text-shadow:0 4px 20px rgba(0,0,0,.3); }
.art-hero__title em{
    color:var(--emerald)
}

.art-hero__excerpt { font-size:.95rem; color:var(--ink-2); max-width:580px; line-height:1.7; margin-bottom:1.25rem; }

/* Author chip */
.art-hero__author { display:inline-flex; align-items:center; gap:.6rem; background: rgb(57 90 62 / 45%); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:100px; padding:.35rem .9rem .35rem .5rem; text-decoration:none; }
.art-hero__author-avatar { width:26px; height:26px; border-radius:50%; border:1px solid var(--emerald-rule); background:var(--emerald-dim); display:flex; align-items:center; justify-content:center; color:var(--emerald); font-size:.65rem; flex-shrink:0; }
.art-hero__author-name { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.08em; color:var(--ink-2); }
.art-hero__img-credit { position:absolute; bottom:.6rem; right:.75rem; z-index:2; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.08em; color:rgba(255,255,255,.3); }

/* ═══ ARTICLE BODY ══════════════════════════════════════════════════════════ */
.art-body {
    padding:3rem 0 5rem;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}

/* TOC */
.art-toc__list { list-style:none; padding:0; margin:0; }
.art-toc__item { margin-bottom:.15rem; }
.art-toc__link { display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--ink-2); text-decoration:none; padding:.3rem .5rem; border-radius:var(--radius); border-left:2px solid transparent; transition:color .15s, background .15s, border-color .15s; }
.art-toc__link:hover  { color:var(--emerald); background:var(--emerald-dim); border-left-color:var(--emerald); font-weight: bold; }
.art-toc__link.active { color:var(--emerald); border-left-color:var(--emerald); }
.art-toc__link::before { content:''; width:4px; height:4px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.5; }

/* Article info box */
.art-info-block {
    display:flex;
    flex-direction:column;
    gap:.65rem;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}
.art-info-block-row{display:flex;justify-content:space-between;align-items:center;}
.art-info-block-title{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color: var(--ink-3);}
.art-info-block-value{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-2);}

/* Article content */
.art-content { max-width:100%; }
.art-content h2 { font-size:1.5rem; font-weight:700; color:var(--ink); margin:0 0 1rem; padding-top:.5rem; display:flex; align-items:center; gap:.75rem; }
.art-content h2::after { content:''; flex:1; height:1px; background:var(--rule); opacity:.6; }
.art-content h3 { font-size:1.1rem; font-weight:600; color:var(--ink-2); margin:1.75rem 0 .75rem; }
.art-content p { font-size:.92rem; color:var(--ink-2); line-height:1.9; }
.art-content strong { color:var(--ink); font-weight:600; }
.art-content em { color:var(--emerald); font-style:italic; }
.art-content a { color:var(--emerald); text-decoration-color:var(--emerald-rule); transition:color .15s; }
.art-content a:hover { color:var(--emerald-lt); }
/* Lists read as part of the article: the same size, colour and leading as a
   paragraph, with the marker picked out in the accent. */
.art-content ul, .art-content ol { font-size:.92rem; color:var(--ink-2); line-height:1.9; margin:0 0 1.25rem; padding-left:1.35rem; }
.art-content li { margin-bottom:.4rem; padding-left:.25rem; }
.art-content li::marker { color:var(--emerald); }

/* Lead paragraph: the article's opening line, a step up from body text. */
.art-content .art-lead { font-size:1.1rem; line-height:1.75; color:var(--ink); margin-bottom:1.5rem; }

/* Key fact: the one statement a reader should leave with. The same ground and
   emerald top accent as .art-cta, with an overline label and display-sized text. */
.art-keyfact { position:relative; overflow:hidden; background:var(--bg-card); border-radius:var(--radius-lg); padding:1.75rem 1.75rem 1.6rem; margin:2rem 0; }
.art-keyfact::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--emerald), transparent); }
.art-keyfact__label { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--emerald-lt); margin-bottom:.7rem; }
.art-content .art-keyfact__text { font-family:var(--font-display); font-size:1.3rem; font-weight:600; line-height:1.5; color:var(--ink); margin:0; }
.art-content .art-keyfact__text strong { color:var(--emerald-lt); font-weight:800; }
html[data-theme="light"] .art-keyfact { box-shadow:0 8px 24px rgba(55,45,28,.06); }
/* --emerald-lt is the darker green in light theme, but ivory needs --emerald-drk. */
html[data-theme="light"] .art-keyfact__label,
html[data-theme="light"] .art-content .art-keyfact__text strong { color:var(--emerald-drk); }
/* ID box on ivory: the latin name (--emerald) measured 3.06:1 and the field
   labels (--ink-4) 3.13:1, both small mono text. */
html[data-theme="light"] .id-box__latin { color:var(--emerald-drk); }
html[data-theme="light"] .id-box__field-label { color:var(--ink-2); }
/* The source line under a key fact: where the claim comes from, in small mono. */
.art-keyfact__source { display:block; margin-top:.9rem; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em; line-height:1.7; color:var(--ink-2); }
/* Block, not flex: the italic journal name and et al. are inline runs, and flex would split them into gapped items. */
.art-keyfact__source > .fa-book-open { margin-right:.35rem; }

/* A formal citation: hanging indent, the DOI and document links set apart. */
.art-reference { background:var(--bg-card); border-radius:var(--radius-lg); padding:1.4rem 1.5rem; margin:0 0 1.5rem; }
.art-content .art-reference__cite { font-size:.86rem; line-height:1.8; color:var(--ink-2); margin:0 0 .8rem; padding-left:1.5rem; text-indent:-1.5rem; overflow-wrap:anywhere; }
.art-content .art-reference__note { font-size:.8rem; line-height:1.7; color:var(--ink-2); margin:0 0 1rem; }
.art-content .art-reference__links { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin:0; font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }
.art-content .art-reference__links a { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; }
html[data-theme="light"] .art-reference { box-shadow:0 8px 24px rgba(55,45,28,.06); }
/* Closing call to action: a ground with the same emerald top accent as the
   quick-guides bar, so it reads as part of the site rather than pasted in. */
.art-cta { position:relative; overflow:hidden; background:var(--bg-card); border-radius:var(--radius-lg); padding:2.25rem 1.75rem 1.75rem; margin:2.75rem 0 1.5rem; text-align:center; }
.art-cta::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--emerald), transparent); }
.art-content .art-cta__title { font-family:var(--font-display); font-size:1.25rem; font-weight:700; line-height:1.45; color:var(--ink); margin:0 auto .65rem; max-width:34rem; }
.art-content .art-cta__text { font-size:.9rem; color:var(--ink-2); margin:0 0 1.4rem; }
/* .art-content a would otherwise paint the button's label emerald on emerald. */
.art-content .art-cta__btn, .art-content .art-cta__btn:hover { color:#ffffff; text-decoration:none; }
.art-content .art-cta__note { font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; line-height:1.7; color:var(--ink-2); margin:1.5rem 0 0; }
.art-content .art-cta__note strong { color:var(--ink); }
html[data-theme="light"] .art-cta { box-shadow:0 8px 24px rgba(55,45,28,.06); }
/* --emerald on ivory: em 3.62:1, tip strong 4.04:1. --emerald-drk gives 7.30. */
html[data-theme="light"] .art-content em,
html[data-theme="light"] .art-tip__text strong { color:var(--emerald-drk); }
html[data-theme="light"] .art-content .art-cta__btn,
html[data-theme="light"] .art-content .art-cta__btn:hover { color:var(--white); }

/* Pullquote */
.art-pullquote { position:relative; border-radius: 1rem; background: #191d19; padding:1.75rem 1.5rem 1.75rem 3.5rem; margin:2.5rem 0; }
.art-pullquote::before { content:'\201C'; position:absolute; left:.5rem; top:.5rem; font-family:var(--font-display); font-size:5rem; font-weight:800; line-height:1; color:var(--emerald); opacity:.18; pointer-events:none; user-select:none; }
.art-pullquote p { font-family:var(--font-display); font-size:1.08rem; font-weight:500; color:var(--ink-2); line-height:1.65; margin:0; font-style:italic; letter-spacing:.01em; }
.art-pullquote cite { display:flex; align-items:center; gap:.5rem; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-top:.75rem; }
.art-pullquote cite::before { content:''; width:16px; height:1px; background:var(--emerald); opacity:.5; }

/* ID box */
.id-box { background:var(--bg-card); border-radius:var(--radius-lg); overflow:hidden; margin:2rem 0; }
.id-box__header { display:flex; align-items:center; gap:.75rem; padding:.9rem 1.25rem; background:var(--bg-3); border-bottom:1px solid var(--rule); }
.id-box__icon { width:34px; height:34px; border-radius:var(--radius); background:var(--emerald-dim); border:1px solid var(--emerald-rule); display:flex; align-items:center; justify-content:center; color:var(--emerald); font-size:.85rem; flex-shrink:0; }
.id-box__name { font-family:var(--font-display); font-size:.95rem; font-weight:700; color:var(--ink); }
.id-box__latin { font-family:var(--font-mono); font-style:italic; font-size:.65rem; color:var(--emerald); }
.id-box__body { padding:1.1rem 1.25rem; }
.id-box__grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:575px) { .id-box__grid { grid-template-columns:1fr; } }
.id-box__field-label { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin-bottom:.25rem; }
.id-box__field-val { font-size:.82rem; color:var(--ink-2); line-height:1.5; }
.id-box__img-wrap { display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; margin-top:1rem; }
.id-box__img-wrap img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); display:block; }

/* Tip callout */
.art-tip { display:flex; gap:.85rem; align-items:flex-start; background:var(--emerald-dim); border-radius:var(--radius-lg); padding:1rem 1.25rem; margin:1.5rem 0; }
.art-tip__icon { color:var(--emerald); font-size:1rem; flex-shrink:0; padding-top:.15rem; margin-top: auto; margin-bottom: auto;}
.art-tip__text { font-size:.85rem; color:var(--ink-2); line-height:1.75; margin:0; margin-top: auto; margin-bottom: auto;}
.art-tip__text strong { color:var(--emerald); }

/* Warning callout — semantic orange kept intentionally */
.art-warn { display:flex; gap:.85rem; align-items:flex-start; background:rgba(200,120,32,.08); border:1px solid rgba(200,120,32,.35); border-radius:var(--radius-lg); padding:1rem 1.25rem; margin:1.5rem 0; }
.art-warn__icon { color:#c87820; font-size:1rem; flex-shrink:0; padding-top:.15rem; margin-top: auto; margin-bottom: auto;}
.art-warn__text { font-size:.85rem; color:var(--ink-2); line-height:1.75; margin-top: auto; margin-bottom: auto;}

/* Comparison table */
.id-table { width:100%; border-collapse:collapse; margin:1.5rem 0; font-size:.82rem; }
/* Rows, not a grid of grey cells — the same hairline every list here uses. */
.id-table th { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--emerald); background:var(--bg-3); border-bottom:1px solid var(--rule); padding:.6rem .85rem; text-align:left; }
.id-table td { border-bottom:1px solid var(--rule); padding:.6rem .85rem; color:var(--ink-2); vertical-align:top; }
.id-table tr:nth-child(even) td { background:rgba(255,255,255,.02); }

/* Tags */
.art-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin:2rem 0; }
.art-tag {font-family: var(--font-mono);
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-radius: 100px;
    background: var(--parchment-dim);
    color: var(--ink-3) !important;
    text-decoration: none;
    transition: all ease .2s;
    padding: 5px 14px;
    line-height: 12px;
    }
.art-tag:hover { color:var(--emerald) !important; background:var(--emerald-dim); transition: all ease .2s; }

/* Divider */
.art-divider { border:none; border-top:1px solid var(--rule); margin:2.5rem 0; position:relative; }
.art-divider::after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:60px; height:1px; background:var(--emerald); opacity:.5; }

/* Sidebar */
.art-sidebar {
    padding-left:1.75rem;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
}
@media(min-width:992px) { .art-sidebar { position:sticky; top:84px; align-self:start; } }
@media(max-width:991px) { .art-sidebar { padding-left:0; margin-top:3rem; } }
/* .sidebar-widget, .sidebar-widget__title and ::after are defined once in the
   blog-list sidebar section above and shared by the article sidebar. */

/* Share */
.share-btns { display:flex; flex-direction:row; flex-wrap:wrap; gap:.5rem; }
.share-btn { display:flex; align-items:center; gap:.75rem; font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; padding:.55rem .85rem; border-radius:var(--radius); border: none; color:var(--ink-2); background:var(--teal-dim); transition: color .2s, background .2s; }
/* The bar sits inside .art-content, whose link rule would paint these green.
   This selector outranks it; the old !important did too, but also blocked hover. */
.art-content .share-btn { color:var(--ink-2); text-decoration:none; }
.share-btn:hover, .art-content .share-btn:hover { color:var(--emerald-lt); background:var(--emerald-dim); }
.share-btn:focus-visible { outline:2px solid var(--emerald-lt); outline-offset:2px; }
.share-btn i { width:16px; text-align:center; }

/* ── Author card ── */
.art-byline {
    margin:2.5rem 0 0;
    background:var(--bg-card);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.art-byline__header {
    display:flex; align-items:center; gap:.5rem;
    padding:.6rem 1.25rem;
    justify-content: space-between;
    font-family:var(--font-mono); font-size:.58rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--emerald);
}
.art-byline__body {
    display:flex; gap:1.25rem; padding:1.25rem;
    align-items:flex-start; flex-wrap:wrap;
}
.art-byline__avatar {
    width:60px; height:60px; border-radius:1rem; flex-shrink:0;
    background:var(--bg-3);
    display:flex; align-items:center; justify-content:center;
    color:var(--emerald); font-size:1.4rem; overflow:hidden;
}
.art-byline__avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.art-byline__info { flex:1; min-width:180px; }
.art-byline__name {
    font-family:var(--font-display); font-size:1rem; font-weight:700;
    color:var(--ink); margin-bottom:.2rem;
}
.art-byline__username {
    font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--emerald); margin-bottom:.5rem;
    display:flex; align-items:center; gap:.3rem;
}
.art-byline__bio {
    font-size:.82rem; color:var(--ink-3); line-height:1.7; margin:0;
}
/* The author's own social links. __body is a wrapping flex row, so a full
   basis drops this onto its own line under the avatar and bio rather than
   squeezing it in beside them. */
.art-byline__socials { flex:1 0 100%; margin-top:.25rem; }
.art-byline__footer {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:.75rem;
    padding:.85rem 1.25rem;
    border-radius: var(--radius-lg);
    background:var(--bg-2);
}
.art-byline__share { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.art-byline__share-title { font-family:var(--font-mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); white-space:nowrap; }
/* Light theme, on the byline ground: "Share" --ink-4 was 2.53:1, the labels
   2.95, the hover text 2.83. */
html[data-theme="light"] .art-byline__share-title { color:var(--ink-2); }
/* On the teal wash, --ink-2 labels were 4.37:1 and an --emerald-drk hover 4.32:1. */
html[data-theme="light"] .art-content .share-btn { color:var(--ink); }
html[data-theme="light"] .share-btn:hover,
html[data-theme="light"] .art-content .share-btn:hover { color:var(--emerald-xdrk); }
html[data-theme="light"] .share-btn:focus-visible { outline-color:var(--emerald-drk); }

/* Species links */
.species-link { display:flex; gap:.75rem; align-items:center; text-decoration:none; padding:.6rem 0; border-bottom:1px solid var(--rule); transition:opacity .2s; }
.species-link:last-of-type { border-bottom:none; padding-bottom:0; }
.species-link:hover { opacity:.7; }
.species-link__thumb { width:44px; height:44px; border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
.species-link__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.species-link__name { font-family:var(--font-display); font-size:.8rem; font-weight:600; color:var(--ink); margin-bottom:.1rem; }
.species-link__latin { font-family:var(--font-mono); font-style:italic; font-size:.6rem; color:var(--emerald); }

/* Comments */
/*.art-comments { margin-top:3.5rem; }
.art-comments__title { font-size:1.25rem; font-weight:700; color:var(--ink); margin-bottom:1.75rem; display:flex; align-items:center; gap:.75rem; }
.art-comments__title::after { content:''; flex:1; height:1px; background:var(--rule); opacity:.6; }
.comment-form { background:var(--bg-card); border-radius:var(--radius-lg); padding:1.5rem; margin-bottom:2rem; }
.comment-form__title { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; color:var(--emerald); margin-bottom:1.25rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media(max-width:575px) { .form-row { grid-template-columns:1fr; } }
.form-group { margin-bottom:1rem; }
.form-label { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:.4rem; }
.form-control { width:100%; background:var(--bg-3); border: 1px solid transparent; border-radius:var(--radius); color:var(--ink); font-family:var(--font-body); font-size:.85rem; padding:.6rem .85rem; outline:none; transition:border-color .2s, box-shadow .2s; }
.form-control:focus { border-color:var(--emerald-rule); box-shadow:0 0 0 2px var(--emerald-dim); }
.form-control::placeholder { color:var(--ink-4); }
textarea.form-control { resize:vertical; min-height:110px; }
.form-feedback { font-family:var(--font-mono); font-size:.7rem; padding:.65rem 1rem; border-radius:var(--radius); margin-bottom:1rem; }
.form-feedback--ok  { background:var(--emerald-dim); border:1px solid var(--emerald-rule); color:var(--emerald-lt); }
.form-feedback--err { background:rgba(224,90,90,.1); border:1px solid rgba(224,90,90,.35); color:var(--red); }
.comment { display:flex; gap:1rem; margin-bottom:1.75rem; }
.comment__avatar { width:38px; height:38px; border-radius:50%; background:var(--bg-3); display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:.8rem; flex-shrink:0; }
.comment__body { flex:1; }
.comment__header { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.4rem; }
.comment__author { font-family:var(--font-display); font-size:.85rem; font-weight:700; color:var(--ink); }
.comment__date { font-family:var(--font-mono); font-size:.6rem; color:var(--ink-4); }
.comment__author-badge { font-family:var(--font-mono); font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); }
.comment__text { font-size:.85rem; color:var(--ink-2); line-height:1.75; }
.comment__reply { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); text-decoration:none; margin-top:.4rem; display:inline-block; transition:color .15s; }
.comment__reply:hover { color:var(--emerald); }
.comment--reply { margin-left:3rem; }*/

/* =========================================================
   Shared comments system — blog theme skin
   Matches previous .art-comments styling
   ========================================================= */

#comments {
    margin-top: 3.5rem;
}

#comments .comments-panel {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

#comments .comments-head {
    margin-bottom: 1.75rem;
}

#comments .ruled,
#comments .comments-count {
    display: none;
}

#comments .sec-title,
#comments .comments-head h2,
#comments .comments-head .comments-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: .65rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}

#comments .sec-title::after,
#comments .comments-head h2::after,
#comments .comments-head .comments-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--rule);
    opacity: .6;
}

#comments .comments-intro {
    font-size: .85rem;
    color: var(--ink-3);
    margin: 0;
}

/* form shell */
#comments .comment-form-panel {
    background: var(--bg-card);
    /*border: 1px solid var(--rule); */
    border-radius: var(--radius-lg);
    padding: 1.5rem;
}

#comments .comment-form {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

#comments .comment-form-title {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--emerald);
    margin-bottom: 1.25rem;
}

/* reply state */
#comments .reply-context {
    background: var(--emerald-dim);
    border: 1px solid var(--emerald-rule);
    border-radius: var(--radius);
    padding: .65rem 1rem;
    margin-bottom: 1rem;
    color: var(--emerald-lt);
    font-family: var(--font-mono);
    font-size: .7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#comments .reply-cancel-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-3);
    border-radius: var(--radius);
    padding: .35rem .7rem;
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .15s ease;
}

#comments .reply-cancel-btn:hover {
    color: var(--emerald);
    border-color: var(--emerald-rule);
    background: var(--emerald-dim);
}

/* grid / spacing */
#comments .row.g-3 {
    --bs-gutter-y: 0;
    --bs-gutter-x: 1rem;
}

#comments .form-row,
#comments .comment-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 575px) {
    #comments .form-row,
    #comments .comment-form .form-row {
        grid-template-columns: 1fr;
    }
}

#comments .form-group {
    margin-bottom: 1rem;
}

/* labels */
#comments .comment-label {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
    display: block;
    margin-bottom: .5rem;
    margin-top: .5rem;
}

#comments .comment-optional {
    color: var(--ink-4);
}

/* fields */
#comments .comment-input,
#comments .comment-textarea,
#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
    width: 100%;
    background: var(--bg-3);
    border-color: var(--parchment-dim);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: .85rem;
    padding: .6rem .85rem;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    -webkit-text-fill-color: var(--ink);
    opacity: 1;
}

#comments .comment-input:focus,
#comments .comment-textarea:focus,
#comments input:focus,
#comments textarea:focus {
    border-color: var(--emerald-rule);
    box-shadow: 0 0 0 2px var(--emerald-dim);
    background: var(--bg-3);
    color: var(--ink);
}

#comments .comment-input::placeholder,
#comments .comment-textarea::placeholder,
#comments input::placeholder,
#comments textarea::placeholder {
    color: var(--ink-4);
    opacity: 1;
}

#comments .comment-textarea,
#comments textarea {
    resize: vertical;
    min-height: 110px;
}

/* checkbox */
#comments .comment-check {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink-2);
    font-size: .82rem;
    margin-bottom: .5rem;
    margin-top: .5rem;
}

#comments .comment-check input[type="checkbox"] {
    accent-color: var(--emerald) !important;
}
/* Unchecked, this is --bg-3 on the form's --bg-card: 1.03:1, invisible. The
   edge stays, but in the accent rather than neutral grey — --emerald reads
   4.32:1, past the 3:1 a control boundary needs. */
.form-check-input{
    background-color: var(--bg-3) !important;
    border: 1px solid var(--emerald) !important;
}

/* messages */
#comments .comment-alert {
    font-family: var(--font-mono);
    font-size: .7rem;
    padding: .65rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}
.form-check-input:checked {
    background-color: var(--bg-3) !important;
    border: 1px solid var(--emerald) !important;
    color: var(--white) !important;
}
.form-check-input:checked[type="checkbox"] {
    accent-color: var(--emerald) !important;
    background-color: var(--emerald) !important;
    border-color: var(--emerald) !important;
    color: var(--white) !important;
}
.form-check-input:checked:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e") !important;
    background-color: var(--emerald) !important;
}
.form-check-input:active {
    filter: brightness(100%) !important;
}
#comments .comment-alert.is-success {
    background: var(--emerald-dim);
    border: 1px solid var(--emerald-rule);
    color: var(--emerald-lt);
}

#comments .comment-alert.is-error {
    background: rgba(224,90,90,.1);
    border: 1px solid rgba(224,90,90,.35);
    color: var(--red);
}

#comments .comment-note {
    font-size: .78rem;
    color: var(--ink-4);
    margin: 0;
    margin-bottom: .5rem;

}

/* submit button */
#comments .btn-support,
#comments .btn-emerald {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
}

/* list */
#comments .comments-list {
    margin-top: 1rem;
}

#comments .comment-empty {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--ink-4);
    text-align: center;
    padding: 1.5rem 0;
}

/* comment item */
#comments .comment-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding: 0;
    border: 0;
    position: relative;
}

#comments .comment-item::before {
    content: "";
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-3);
   
    display: block;
    flex: 0 0 38px;
    margin-top: 1px;
}

#comments .comment-item::after {
    content: "\f007";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 11px;
    top: 9px;
    font-size: .8rem;
    color: var(--ink-3);
    line-height: 1;
    pointer-events: none;
}

#comments .comment-item > .comment-meta,
#comments .comment-item > .comment-body,
#comments .comment-item > .comment-actions,
#comments .comment-item > .comment-children {
    margin-left: 0;
}

#comments .comment-item > .comment-meta,
#comments .comment-item > .comment-body,
#comments .comment-item > .comment-actions {
    position: relative;
    left: 0;
}

#comments .comment-item {
    flex-wrap: wrap;
}

#comments .comment-meta,
#comments .comment-body,
#comments .comment-actions,
#comments .comment-children {
    width: calc(100% - 54px);
}

#comments .comment-meta {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

#comments .comment-author {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    color: var(--ink);
}

#comments .comment-date {
    font-family: var(--font-mono);
    font-size: .6rem;
    color: var(--ink-4);
}

#comments .comment-body {
    font-size: .85rem;
    color: var(--ink-2);
    line-height: 1.75;
}

#comments .comment-actions {
    margin-top: .4rem;
}

#comments .comment-reply-btn {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-4);
    text-decoration: none;
    margin-top: .4rem;
    display: inline-block;
    transition: color .15s;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

#comments .comment-reply-btn:hover {
    color: var(--emerald);
}

/* nested replies */
#comments .comment-children {
    margin-top: .75rem;
    margin-left: 3rem;
    padding-left: 0;
    border-left: 0;
}

#comments .comment-children .comment-item {
    margin-bottom: 1.25rem;
}

/* make Turnstile fit nicely */
#comments .cf-turnstile {
    margin-top: .25rem;
}

/* prevent hidden honeypot showing */
#comments .comment-honeypot {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Related posts */
.art-related { padding:3rem 0 5rem; }
.art-related__title { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-4); display:flex; align-items:center; gap:1rem; white-space:nowrap; margin-bottom:2rem; }
.art-related__title::before,.art-related__title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--emerald),transparent); opacity:.35; }
.related-card { display:block; text-decoration:none; background:var(--bg-card); border: 1px solid transparent; border-radius:var(--radius-lg); overflow:hidden; transition:border-color .25s, transform .25s, box-shadow .25s; }
.related-card:hover { border-color:var(--emerald-rule); transform:translateY(-4px); box-shadow:0 16px 44px rgba(0,0,0,.4); }
.related-card__img { position:relative; overflow:hidden; aspect-ratio:16/9; }
.related-card__img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s; }
.related-card:hover .related-card__img img { transform:scale(1.06); }
.related-card__cat { position:absolute; top:.65rem; left:.65rem; font-family:var(--font-mono); font-size:.55rem; letter-spacing:.12em; text-transform:uppercase; background:rgba(0,0,0,.6); backdrop-filter:blur(5px); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.7); padding:.18rem .55rem; border-radius:100px; }
.related-card__body { padding:1rem; }
.related-card__title { font-family:var(--font-display); font-size:.88rem; font-weight:700; color:var(--ink); line-height:1.3; margin-bottom:.35rem; transition:color .2s; }
.related-card:hover .related-card__title { color:var(--emerald-lt); }
.related-card__date { font-family:var(--font-mono); font-size:.6rem; color:var(--ink-4); }

/* Light theme: editorial surfaces use the shared ivory field-guide treatment. */
html[data-theme="light"] .art-tip,
html[data-theme="light"] .art-warn,
html[data-theme="light"] .comment {
    background: var(--bg-card);

    color: var(--ink);
    box-shadow: 0 8px 24px rgba(55,45,28,.06);
}

html[data-theme="light"] .art-pullquote {
    background: var(--bg-2);
    border: 0;
    box-shadow: none;
}

html[data-theme="light"] .art-sidebar .sidebar-widget {
    background: var(--bg-card);
    box-shadow: none;
}

html[data-theme="light"] .art-byline p,
html[data-theme="light"] .art-byline small,
html[data-theme="light"] .comment p,
html[data-theme="light"] .comment small {
    color: var(--ink-2);
}

/* ---------------------------------------------------------------------------
   Article figures and the image lightbox

   Markup an editor inserts (see the "Image with zoom" template in the admin):

     <figure class="art-figure">
       <a class="art-zoom" href="…-large.jpg"><img src="…-med.jpg" alt="…"></a>
       <figcaption>Caption</figcaption>
     </figure>

   The link is a real link, so with JavaScript off it simply opens the full
   image. lightbox.js upgrades it to an overlay.
   ------------------------------------------------------------------------- */
.art-figure { margin: 1.75rem 0; }
.art-figure img {
    display: block; width: 100%; height: auto;
    border-radius: var(--radius-lg);
   
}
.art-figure figcaption {
    margin-top: .6rem;
    font-size: .78rem; line-height: 1.6; color: var(--ink-2);
    text-align: center;
}

.art-zoom { position: relative; display: block; cursor: zoom-in; }
.art-zoom::after {
    content: "\f00e";                       /* magnifier, Font Awesome */
    font-family: "Font Awesome 6 Free", "Font Awesome 7 Free"; font-weight: 900;
    position: absolute; right: .6rem; bottom: .6rem;
    width: 2rem; height: 2rem; display: grid; place-items: center;
    background: rgba(0, 0, 0, .55); color: #fff;
    border-radius: 50%; font-size: .8rem;
    opacity: 0; transition: opacity .18s ease;
    pointer-events: none;
}
.art-zoom:hover::after, .art-zoom:focus-visible::after { opacity: 1; }
.art-zoom:focus-visible { outline: 2px solid var(--emerald-lt); outline-offset: 3px; }

/* Two or three side by side, collapsing on small screens */
.art-figures { display: grid; gap: 1rem; margin: 1.75rem 0; }
.art-figures--2 { grid-template-columns: repeat(2, 1fr); }
.art-figures--3 { grid-template-columns: repeat(3, 1fr); }
.art-figures .art-figure { margin: 0; }
@media (max-width: 640px) {
    .art-figures--2, .art-figures--3 { grid-template-columns: 1fr; }
}

/* ---- the overlay ---- */
.lb {
    position: fixed; inset: 0; z-index: 2000;
    display: none; place-items: center;
    padding: clamp(.75rem, 3vw, 2.5rem);
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(3px);
}
.lb.is-open { display: grid; }
.lb__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.lb__img {
    max-width: 100%; max-height: 82vh; width: auto; height: auto;
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .6);
}
.lb__cap { color: #d8d4c8; font-size: .82rem; line-height: 1.6; text-align: center; max-width: 70ch; margin: 0; }
.lb__close {
    position: absolute; top: 1rem; right: 1rem;
    width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); color: #fff;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
    font-size: 1rem; cursor: pointer;
}
.lb__close:hover { background: rgba(255, 255, 255, .18); }
.lb__spinner { color: #d8d4c8; font-size: .82rem; }

/* Honour a reduced-motion preference: no transitions, just show it. */
@media (prefers-reduced-motion: reduce) {
    .art-zoom::after { transition: none; }
}

html[data-theme="light"] .art-hero__excerpt {
    color: #343331;
}

html[data-theme="light"] .page-blog-list .ot-hero__sub {
    color: #343331;
}

/* Placeholder for a sidebar link with no thumbnail — was an inline style on
   the locations rows; the club rows use the same class. */
.link-thumb__fallback {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    background: var(--bg-3); color: var(--ink-2); font-size: .7rem;
}
.species-link__sub {
    font-size: .68rem; color: var(--ink-2); line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html[data-theme="light"] .tag-chip .filter-pill {
    background-color: var(--parchment-dim);
}
html[data-theme="light"] .tag-chip:hover .filter-pill:hover {
    background-color: var(--emerald-ltdim);
}

/* ── Light theme contrast (2026-09-16) ──
   Colour only; the components' own rules above are untouched. --emerald and
   --ink-3 both land near 4:1 on the ivory ground at these small sizes. */
html[data-theme="light"] .art-tag,
html[data-theme="light"] .art-info-block-title { color: var(--ink-2) !important; }
html[data-theme="light"] .sidebar-widget__title,
html[data-theme="light"] .art-byline__header,
html[data-theme="light"] .art-byline__username a { color: var(--emerald-drk); }

/* Byline links took their colour from an inline style="color:inherit" plus
   onmouseover handlers, which no stylesheet rule could reach. */
.art-byline__link { color: inherit; text-decoration: none; transition: color .15s; }
.art-byline__link:hover { color: var(--emerald-lt); }
html[data-theme="light"] .art-byline__username,
html[data-theme="light"] .art-byline__link:hover { color: var(--emerald-drk); }