/* Calendar content uses the approved standard-page editorial layout. */
.gi-calendar-page .gi-calendar-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; list-style: none; padding: 0; }
.gi-calendar-page .gi-calendar-months li { margin: 0; overflow: hidden; border: 1px solid var(--gi-border, var(--gi-brand-line)); border-radius: var(--gi-radius-sm); }
.gi-calendar-months a { display: flex; flex-direction: column; height: 100%; font-weight: 700; text-decoration: none; }
.gi-calendar-months a:hover, .gi-calendar-months a:focus-visible { background: var(--gi-sage-100); }
.gi-calendar-months a:focus-visible { outline: 2px solid var(--gi-moss-900); outline-offset: -3px; }
.gi-calendar-months img { aspect-ratio: 3 / 2; object-fit: cover; display: block; width: 100%; height: auto; }
.gi-calendar-months__label { display: flex; justify-content: space-between; gap: .5rem; padding: .85rem .85rem .3rem; }
.gi-calendar-months small { display: block; font-size: .75rem; line-height: 1.5; font-weight: 400; padding: 0 .85rem .85rem; }
.gi-calendar-months li > span { display: block; padding: .85rem; }
.gi-calendar-months [aria-current='page'] { background: var(--gi-sage-100); }
.gi-calendar-table { max-width: 100%; overflow-x: auto; margin-block: 1.5rem; }
.gi-calendar-table table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .875rem; line-height: 1.6; }
.gi-calendar-table caption { text-align: start; font-weight: 700; padding-bottom: .75rem; }
.gi-calendar-table :is(th, td) { padding: .8rem; text-align: start; vertical-align: top; border: 1px solid var(--gi-border); }
.gi-calendar-table thead { background: var(--gi-sage-100); }
.gi-calendar-table:focus-visible { outline: 2px solid var(--gi-moss-900); outline-offset: 2px; }
.gi-calendar-page .gi-calendar-tasks { padding-left: 1.35rem; }
.gi-calendar-tasks > li { padding: .25rem 0 1rem .4rem; border-bottom: 1px solid var(--gi-border, var(--gi-brand-line)); }
.gi-calendar-tasks h3 { margin-bottom: .5rem; }
.gi-calendar-tasks p { margin-block: .5rem; }
.gi-calendar-page .gi-calendar-review, .gi-calendar-task-source { font-size: .875rem; }
.gi-calendar-page figcaption { margin-top: .5rem; font-size: .8rem; line-height: 1.5; }
.gi-calendar-page .gi-standard-page__media { overflow: visible; }
.gi-calendar-page .gi-prose figure { margin-inline: 0; }
.gi-calendar-page .gi-prose figure img { width: 100%; height: auto; }
.gi-calendar-page .gi-prose a { overflow-wrap: anywhere; }
@media (max-width: 480px) { .gi-calendar-page .gi-calendar-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- The reading journey ---------------------------------------------------
   A month guide is read like an article, so it takes the article's three
   columns: the contents on the left, the document at the approved measure, the
   rail on the right. The layout is bounded and centred rather than stretched
   across the 110rem shell, which is what left the page reading as one narrow
   band beside a wide empty field. */
.gi-standard-page--calendar {
    --gi-article-gap: clamp(.85rem, 1.5vw, 1.6rem);
    --gi-article-pad: clamp(1.15rem, 2.4vw, 2.6rem);
}
/* The reaction bar sizes to its column, not to the viewport. */
.gi-standard-page--calendar .gi-standard-page__document { container-type: inline-size; }
.gi-standard-page__layout--journey { grid-template-columns: minmax(0, 1fr); margin-inline: auto; }

/* The column takes the article's 58rem rather than the document template's
   48.75rem. Prose keeps its own 70ch measure, so the extra width goes where the
   page needs it: the photographs, the tables, the reaction bar and the
   discussion, which is what the narrower column was starving. */
/* Column 2 is named, the rows are not: the months section exists on a month
   guide and not on the hub, and fixed row numbers would leave the hub an empty
   track with the layout gap still around it. */
@media (min-width: 56.25rem) {
    .gi-standard-page__layout--journey { gap: 2.5rem; grid-template-columns: 12rem minmax(0, 58rem); max-width: 72.5rem; }
    .gi-standard-page__layout--journey > .gi-standard-page__rail { grid-column: 1; grid-row: 1; }
    .gi-standard-page__layout--journey > :is(.gi-standard-page__document, .gi-calendar-next, .gi-article__discussion, .gi-standard-page__aside) { grid-column: 2; max-width: none; min-width: 0; }
}
@media (min-width: 90rem) {
    .gi-standard-page__layout--journey { gap: clamp(2rem, 2.6vw, 3rem); grid-template-columns: 13rem minmax(0, 58rem) 19rem; max-width: 96rem; }
    /* Placement only. article-sidebar.css owns how the rail travels, so both
       reading journeys behave the same way. */
    .gi-standard-page__layout--journey > .gi-standard-page__aside { grid-column: 3; grid-row: 1; }
}
/* One column: the contents block is a full-width band at the top of the page, so
   it stops being sticky. Left sticky it has the whole layout as its containing
   block and rides down over the cards it was meant to sit above. */
@media (max-width: 56.24rem) {
    .gi-standard-page__layout--journey > .gi-standard-page__rail { border-bottom: 1px solid var(--gi-border); max-height: none; overflow: visible; padding-bottom: 1.5rem; position: static; }
    .gi-standard-page__layout--journey > .gi-standard-page__rail ol { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
    .gi-standard-page__layout--journey > .gi-standard-page__rail li { border: 0; }
    .gi-standard-page__layout--journey > .gi-standard-page__rail a { padding: .35rem 0; text-decoration: underline; text-underline-offset: .25em; }
    .gi-standard-page__layout--journey > .gi-standard-page__aside { display: grid; margin-top: 2rem; }
}

/* --- Closing the guide: the year, as pictures -------------------------------
   The rail card is a jump list. This is the browse: the same twelve months with
   their photograph and their one-line summary, where a reader who has finished
   September decides what to open next. */
.gi-calendar-next { border-top: 1px solid var(--gi-cat-line); min-width: 0; padding-top: clamp(2rem, 3.5vw, 3rem); }
.gi-calendar-next__heading { margin-bottom: 1.5rem; }
.gi-calendar-next__heading h2 { color: var(--gi-cat-ground); font-size: clamp(1.4rem, 2vw, 1.85rem); letter-spacing: -.035em; margin: 0; }
.gi-calendar-next__heading p { color: var(--gi-muted); font-size: .9375rem; line-height: 1.6; margin: .5rem 0 0; max-width: 46ch; }
.gi-calendar-next .gi-calendar-months { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 56.24rem) { .gi-calendar-next .gi-calendar-months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .gi-calendar-next .gi-calendar-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }