.gi-article__sidebar { min-width: 0; }
.gi-article__sidebar-inner { align-content: start; display: grid; gap: var(--gi-article-gap); min-width: 0; }
.gi-article__sidebar-inner > section {
    background: var(--gi-ivory-50);
    border: 1px solid var(--gi-border);
    border-radius: .9rem;
    box-shadow: none;
    margin: 0;
}
.gi-article__sidebar-inner h2 { color: var(--gi-moss-900); font-size: 1.02rem; letter-spacing: -.025em; margin: 0; }

/* Seasonal calendar */
.gi-article-calendar { background: var(--gi-brand-paper) !important; overflow: hidden; padding: 1.15rem; position: relative; }
.gi-article-calendar::after { background: url('../artwork/article-botanical-v1.webp') center / contain no-repeat; bottom: -4.5rem; content: ''; height: 12rem; opacity: .28; pointer-events: none; position: absolute; right: -3.5rem; transform: rotate(-10deg); width: 8rem; }
.gi-article-calendar > * { position: relative; z-index: 1; }
.gi-article-calendar header { align-items: flex-start; display: flex; gap: .65rem; }
.gi-article-calendar header > img { background: var(--gi-brand-sage); border-radius: .45rem; box-sizing: content-box; padding: .4rem; }
.gi-article-calendar header p { color: var(--gi-muted); font-size: .82rem; margin: .1rem 0 0; }
.gi-article-calendar ul { display: grid; gap: .45rem; list-style: none; margin: .95rem 0; padding: 0; }
/* The label column is sized by the widest season so the current-month marker cannot wrap it. */
.gi-article-calendar li { align-items: start; display: grid; gap: .1rem .55rem; grid-template-columns: 1.2rem minmax(0, 1fr); padding: .25rem 0; }
.gi-article-calendar li img { height: 1rem; object-fit: contain; width: 1rem; }
.gi-article-calendar li strong { color: var(--gi-moss-900); font-size: .82rem; grid-column: 2; }
.gi-article-calendar li span { color: var(--gi-muted); font-size: .78rem; grid-column: 2; line-height: 1.45; }
.gi-article-calendar li.is-current { background: var(--gi-brand-sage); border-radius: .4rem; margin-inline: -.35rem; padding-inline: .35rem; }
.gi-article-calendar li.is-current strong { color: var(--gi-moss-900); }
.gi-article-sidebar__button {
    align-items: center;
    background: var(--gi-moss-700);
    border: 1px solid var(--gi-moss-700);
    border-radius: .5rem;
    color: var(--gi-ivory-50);
    display: flex;
    font-size: .8rem;
    font-weight: 750;
    justify-content: space-between;
    min-height: 2.5rem;
    padding: .5rem .85rem;
    text-decoration: none;
}
.gi-article-sidebar__button:hover { background: var(--gi-moss-900); color: var(--gi-ivory-50); }

/* Contents list, shared by the rail, the sidebar column and the mobile disclosure */
.gi-article-toc { background: var(--gi-ivory-50); border: 1px solid var(--gi-border); border-radius: .9rem; padding: 1rem 1.15rem; }
.gi-article-toc summary { color: var(--gi-moss-900); cursor: pointer; font-size: .78rem; font-weight: 800; letter-spacing: .07em; line-height: 1.3; list-style-position: outside; min-height: 2.75rem; text-transform: uppercase; }
/* Only top-level sections are numbered; sub-sections are indented instead of continuing the count. */
.gi-article-toc ol { counter-reset: gi-toc-section; list-style: none; margin: .7rem 0 0; padding-left: 0; }
.gi-article-toc li { color: var(--gi-moss-700); font-size: .84rem; margin-bottom: .45rem; }
.gi-article-toc li.gi-article-toc__level-2 { counter-increment: gi-toc-section; padding-left: 1.6rem; }
.gi-article-toc li.gi-article-toc__level-2 > a::before {
    color: var(--gi-moss-700);
    content: counter(gi-toc-section) '.';
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    margin-left: -1.6rem;
    position: absolute;
}
.gi-article-toc li.gi-article-toc__level-3 { font-size: .8rem; padding-left: 2.5rem; }
.gi-article-toc li.gi-article-toc__level-3 > a::before { color: var(--gi-sage-300); content: '–'; margin-left: -.9rem; position: absolute; }
.gi-article-toc a { color: var(--gi-muted); display: block; line-height: 1.5; padding-block: .25rem; text-decoration: none; }
.gi-article-toc a:hover { color: var(--gi-moss-700); text-decoration: underline; }
.gi-article-toc a[aria-current='location'] { background: var(--gi-sage-100); border-radius: .3rem; color: var(--gi-moss-900); display: block; font-weight: 750; margin-left: -.35rem; padding: .2rem .4rem; }

/* Newsletter — the card owns its surface, so the rail only places it. */
.gi-article-newsletter { background: transparent; border: 0; padding: 0; }

/* Community and question panels */
.gi-article-community, .gi-article-question { display: grid; gap: .7rem; grid-template-columns: auto 1fr; padding: 1.15rem; }
.gi-article-community__icon, .gi-article-question__icon { background: var(--gi-brand-sage); border-radius: 50%; color: var(--gi-moss-700); display: grid; height: 2.8rem; place-items: center; width: 2.8rem; }
.gi-article-community p, .gi-article-question p { color: var(--gi-muted); font-size: .8rem; line-height: 1.5; margin: .3rem 0 0; }
.gi-article-community .gi-article-sidebar__button { grid-column: 1 / -1; justify-self: stretch; }
.gi-article-question > a { border: 1px solid var(--gi-sage-300); border-radius: .5rem; color: var(--gi-moss-800); font-size: .8rem; font-weight: 750; grid-column: 1 / -1; justify-self: start; min-height: 2.5rem; padding: .55rem .85rem; text-decoration: none; }
.gi-article-question > a:hover { background: var(--gi-sage-100); }

/* Related guides, a full-width row under the reading card */
.gi-related {
    background: var(--gi-ivory-50);
    border: 1px solid var(--gi-border);
    border-radius: .9rem;
    box-shadow: none;
    min-width: 0;
    padding: calc(var(--gi-article-pad) * .85) var(--gi-article-pad);
}
.gi-related__heading { align-items: baseline; display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; margin-bottom: 1.1rem; }
.gi-related__heading h2 { color: var(--gi-moss-900); font-size: clamp(1.15rem, 1.5vw, 1.4rem); letter-spacing: -.028em; margin: 0; }
.gi-related__more { color: var(--gi-moss-700); font-size: .8rem; font-weight: 800; text-decoration: none; }
.gi-related__more:hover { text-decoration: underline; }
.gi-related__list { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.gi-related__item { display: grid; gap: .65rem; min-width: 0; }
.gi-related__media { border-radius: .6rem; display: block; overflow: hidden; }
.gi-related__media img { aspect-ratio: 16 / 10; display: block; height: 100%; object-fit: cover; transition: transform 260ms var(--gi-ease); width: 100%; }
.gi-related__item:hover .gi-related__media img { transform: scale(1.04); }
.gi-related__illustration { align-items: center; display: inline-flex; height: 4rem; justify-content: center; margin-bottom: .3rem; width: 4rem; }
.gi-related__illustration .gi-home-icon { height: 100%; width: 100%; }
.gi-related__item:has(.gi-related__media) .gi-related__illustration { background: var(--gi-ivory-50); border: .3rem solid var(--gi-ivory-50); border-radius: 50%; box-sizing: content-box; margin-top: -2.75rem; position: relative; }
.gi-related__meta { color: var(--gi-moss-700); font-size: .72rem; font-weight: 750; letter-spacing: .06em; margin: 0 0 .3rem; text-transform: uppercase; }
.gi-related__item h3 { font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.35; margin: 0; }
.gi-related__item h3 a { color: var(--gi-moss-900); text-decoration: none; }
.gi-related__item h3 a:hover { text-decoration: underline; }

/* --- Rail: the other eleven months ----------------------------------------
   Four rows of three, so the year reads as its quarters and the current month
   is found by position before it is found by colour. */
.gi-calendar-rail__months { display: grid; gap: .3rem; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.gi-calendar-rail__months li { margin: 0; min-width: 0; }
.gi-calendar-rail__months :is(a, span) {
    align-items: center;
    border: 1px solid transparent;
    border-radius: .45rem;
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 2.75rem;
    padding: .35rem .25rem;
    text-align: center;
    text-decoration: none;
}
.gi-calendar-rail__months a { background: var(--gi-brand-paper); border-color: var(--gi-cat-line); color: var(--gi-cat-ink); transition: background 160ms var(--gi-ease), border-color 160ms var(--gi-ease), color 160ms var(--gi-ease); }
.gi-calendar-rail__months a:hover { background: var(--gi-cat-wash); border-color: var(--gi-cat-ground); color: var(--gi-cat-ground); }
/* Two marks, two meanings: the page you are on carries the full rubric, the
   month you are actually in only a tinted edge, so a reader on an article still
   finds the season without being told they are somewhere they are not. */
.gi-calendar-rail__months a[aria-current='page'] { background: var(--gi-cat-ground); border-color: var(--gi-cat-ground); color: var(--gi-brand-paper); }
.gi-calendar-rail__months a.is-now { background: var(--gi-cat-wash); border-color: var(--gi-cat-ground); color: var(--gi-cat-ground); }
.gi-calendar-rail__months > li > span { color: var(--gi-muted); opacity: .75; }

@media (prefers-reduced-motion: reduce) {
    .gi-calendar-rail__months a { transition: none; }
}

/* --- Rail: the guides those gestes cite ----------------------------------- */
.gi-calendar-rail__guides { display: grid; gap: .75rem; list-style: none; margin: 0; padding: 0; }
.gi-calendar-rail__guides li { align-items: center; display: grid; gap: .65rem; grid-template-columns: 3rem minmax(0, 1fr); margin: 0; }
.gi-calendar-rail__guides a { color: var(--gi-ink); font-size: .8125rem; font-weight: 650; line-height: 1.35; text-decoration: none; }
.gi-calendar-rail__guides a:hover { color: var(--gi-cat-ink); text-decoration: underline; }

@media (min-width: 56.25rem) {
    .gi-article__toc-rail { align-self: stretch; position: relative; }
    .gi-article__toc-inner { align-self: start; max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; position: sticky; scrollbar-width: thin; top: 2rem; }
    .admin-bar .gi-article__toc-inner { top: 4rem; }
    .gi-article-toc { background: transparent; border: 0; padding: .25rem; }
    .gi-article__sidebar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 90rem) {
    /* The rail stays on screen for the whole article and stops with it. The
       aside stretches over the reading row and is the sticky containing block,
       so nothing can carry the cards past the end of the body; the inner block
       is what travels. It owns no scrollbar: when the cards are taller than the
       viewport, reading-rail.js walks this offset with the reader so their
       bottom stays reachable. */
    .gi-article__sidebar { align-self: stretch; position: relative; }
    .gi-article__sidebar-inner {
        --gi-rail-pin: 32px;
        grid-template-columns: 1fr;
        position: sticky;
        top: var(--gi-rail-pin);
    }
    .admin-bar .gi-article__sidebar-inner { --gi-rail-pin: 64px; }
}

@media (prefers-reduced-motion: reduce) {
    .gi-related__media img { transition: none; }
}

.gi-article-calendar__note { color: var(--gi-muted); font-size: .75rem; line-height: 1.6; margin: 0 0 1rem; }

/* --- Rail cards -----------------------------------------------------------
   One card shape for the month checklist, the topics and the ranking, so the
   rail reads as a set rather than three unrelated panels. */
.gi-article-aside {
    background: var(--gi-brand-paper);
    border: 1px solid var(--gi-cat-line);
    border-radius: .9rem;
    padding: 1.15rem 1.2rem 1.2rem;
}
.gi-article-aside + .gi-article-aside,
.gi-article-newsletter + .gi-article-aside { margin-top: 1rem; }
.gi-article-aside > header { align-items: center; display: flex; gap: .6rem; margin-bottom: .7rem; }
.gi-article-aside h2 { color: var(--gi-cat-ground); font-size: 1.02rem; letter-spacing: -.025em; margin: 0; }
.gi-article-aside__mark { align-items: center; display: inline-flex; flex: 0 0 auto; }
.gi-article-aside__lead { color: var(--gi-muted); font-size: .8125rem; line-height: 1.55; margin: 0 0 .9rem; }
.gi-article-aside__link { align-items: center; color: var(--gi-cat-ink); display: inline-flex; font-size: .8125rem; font-weight: 750; gap: .4rem; margin-top: .9rem; min-height: 2.5rem; text-decoration: none; }
.gi-article-aside__link:hover { text-decoration: underline; }

.gi-article-aside--calendar { background: var(--gi-cat-wash); }

.gi-article-aside__checklist { display: grid; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.gi-article-aside__checklist li { display: grid; gap: .55rem; grid-template-columns: 1.25rem minmax(0, 1fr); }
.gi-article-aside__tick {
    background: var(--gi-cat-ground);
    border-radius: 999px;
    flex: 0 0 auto;
    height: 1.25rem;
    margin-top: .1rem;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    position: relative;
    width: 1.25rem;
}
/* A drawn tick rather than a glyph, so it inherits the rubric colour. */
.gi-article-aside__tick::after {
    border: 2px solid var(--gi-brand-paper);
    border-inline-start: 0;
    border-block-start: 0;
    content: '';
    height: .5rem;
    inset-block-start: .28rem;
    inset-inline-start: .44rem;
    position: absolute;
    transform: rotate(43deg);
    width: .3rem;
}
.gi-article-aside__checklist a,
.gi-article-aside__checklist strong { color: var(--gi-cat-ground); display: block; font-size: .8375rem; font-weight: 750; line-height: 1.35; text-decoration: none; }
.gi-article-aside__checklist a:hover { text-decoration: underline; }
.gi-article-aside__checklist small { color: var(--gi-muted); display: block; font-size: .75rem; line-height: 1.45; margin-top: .15rem; }

.gi-article-aside__topics { display: grid; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.gi-article-aside__topics li { align-items: center; display: flex; gap: .6rem; justify-content: space-between; }
.gi-article-aside__topics a { align-items: center; color: var(--gi-ink); display: inline-flex; flex: 1 1 auto; font-size: .8375rem; font-weight: 650; gap: .5rem; min-height: 2.4rem; min-width: 0; text-decoration: none; }
.gi-article-aside__topics a:hover { color: var(--gi-cat-ink); }
.gi-article-aside__leaf { align-items: center; display: inline-flex; flex: 0 0 auto; }
.gi-article-aside__tally { background: var(--gi-cat-wash); border-radius: 999px; color: var(--gi-cat-ink); flex: 0 0 auto; font-size: .6875rem; font-weight: 800; font-variant-numeric: tabular-nums; padding: .2rem .55rem; }

.gi-article-aside__ranking { counter-reset: rank; display: grid; gap: .7rem; list-style: none; margin: 0; padding: 0; }
.gi-article-aside__ranking li { align-items: center; display: grid; gap: .6rem; grid-template-columns: 1rem 3rem minmax(0, 1fr); }
.gi-article-aside__rank { color: var(--gi-muted); font-size: .8125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gi-article-aside__thumb { border-radius: .4rem; height: 3rem; object-fit: cover; width: 3rem; }
.gi-article-aside__thumb--empty { background: var(--gi-cat-wash); display: block; }
.gi-article-aside__ranking a { color: var(--gi-ink); font-size: .8125rem; font-weight: 650; line-height: 1.35; text-decoration: none; }
.gi-article-aside__ranking a:hover { color: var(--gi-cat-ink); text-decoration: underline; }