/* One outer canvas across the publication and standalone pages.
   Prose measures, full-bleed artwork and internal column layouts remain local. */
:root {
  --site-content-max: 1360px;
  --site-content-gutter: 36px;
  --site-header-gutter: 36px;
  --site-content-width: min(calc(100% - 2 * var(--site-content-gutter)), var(--site-content-max));
  --site-header-width: min(calc(100% - 2 * var(--site-header-gutter)), var(--site-content-max));
}
@media (max-width: 900px) {
  :root { --site-content-gutter: 18px; --site-header-gutter: 16px; }
}
@media (max-width: 370px) {
  :root { --site-content-gutter: 15px; }
}

body.publication-site {
  --hajar-content-width: var(--site-content-max);
  --hajar-gutter: var(--site-content-gutter);
}
body.publication-site .wrapper,
body.publication-site .archive-page > .wrapper,
body.publication-site .page-header__wrapper,
body.publication-site .categories-page-header,
body.publication-site .categories-page .category,
body.publication-site .contact-page__wrapper,
body.publication-site .home-editorial__wrap,
body.publication-site .hajar-home-hero,
body.publication-site .apps,
body.publication-site .why-hajar,
body.publication-site .publication-subscribe:not(.publication-subscribe--about),
body.publication-site .ai-stoic-about__wrap,
body.publication-site .story-hero__inner,
body.publication-site .story-audio,
body.publication-site .story-shell,
.reading-page .reading-hero__content,
.reading-page .reading-main,
.reading-page .reading-footer,
.racing-site .racing-intro,
.racing-site .racing-territories,
.racing-site .racing-years,
.racing-site .racing-chronology,
.racing-site .racing-footer {
  width: var(--site-content-width) !important;
  max-width: var(--site-content-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
body.publication-site .header__container,
body.story-layout .story-header .header__container,
.reading-page .reading-header .header__container,
.racing-site .racing-header__inner {
  width: var(--site-header-width) !important;
  max-width: var(--site-content-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}
body.publication-site .story-audio__inner { width: 100%; }
body.publication-site .contact-page__wrapper { justify-content: flex-start; }
body.publication-site .contact-page__box { width: min(100%, 739px); }
body.publication-site .publication-subscribe:not(.publication-subscribe--about) {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px 42px;
  padding-inline: clamp(18px, 2.5vw, 36px) !important;
}
body.publication-site .publication-subscribe:not(.publication-subscribe--about) > div { grid-row: 1 / 3; }
body.publication-site .publication-subscribe:not(.publication-subscribe--about) > .publication-subscribe__note { grid-column: 2; }
body.publication-site .publication-subscribe form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  max-width: 640px;
}
body.publication-site .publication-subscribe form .publication-subscribe__note,
body.publication-site .publication-subscribe form .publication-subscribe__status { grid-column: 1 / -1; }
body.publication-site .publication-subscribe form label { min-width: 0; }
body.publication-site .publication-subscribe form input { width: 100%; }
body.publication-site .publication-subscribe--about { width: min(100%, 640px); max-width: 640px; margin-inline: auto; }
body.publication-site .publication-subscribe--about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
}
body.publication-site .publication-subscribe--about label { min-width: 0; }
body.publication-site .publication-subscribe--about input { width: 100%; min-width: 0; }
body.publication-site .publication-subscribe--about .publication-subscribe__note,
body.publication-site .publication-subscribe--about .publication-subscribe__status {
  grid-column: 1 / -1;
  width: 100%;
  max-width: none;
}

/* A wider canvas must widen the flexible tracks, rather than leave a fixed
   topic-card container floating inside it. Text still has a readable measure. */
body.publication-site .tag-page-post-card__container { max-width: none; min-width: 0; }
body.publication-site .tag-page-post-card__info { max-width: 700px; min-width: 0; }
body.publication-site .tag-page-post-card__link { flex-shrink: 0; }
body.publication-site .category__title-wrapper { gap: 20px; }
body.publication-site .category__title { min-width: 0; overflow-wrap: anywhere; }
body.publication-site .category__link { flex-shrink: 0; transform: none; }
body.publication-site .category__link svg { opacity: 1; }
body.publication-site .archive-page .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.publication-site .archive-page .post-card { min-width: 0; }
body.publication-site .archive-page .post-card__title { max-width: 560px; }
body.publication-site .archive-page .post-card__excerpt { max-width: 60ch; }

@media (max-width: 1000px) {
  .reading-page .reading-main { display: block; }
  .reading-page .reading-index { position: static; margin-bottom: 52px; padding-bottom: 28px; border-bottom: 1px solid var(--reading-rule); }
  .reading-page .reading-index__label { margin-bottom: 15px; }
  .reading-page .reading-index ol { display: flex; gap: 8px; overflow-x: auto; margin: 0; padding: 0 0 10px; scrollbar-width: none; }
  .reading-page .reading-index ol::before,
  .reading-page .reading-index li::before,
  .reading-page .reading-index__closing { display: none; }
  .reading-page .reading-index li { flex: 0 0 auto; }
  .reading-page .reading-index a { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--reading-rule); font-size: 13px; white-space: nowrap; }
  .reading-page .reading-section__header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .reading-page .reading-section__eyebrow { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  body.publication-site .publication-subscribe:not(.publication-subscribe--about) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  body.publication-site .publication-subscribe:not(.publication-subscribe--about) > div { grid-row: auto; }
  body.publication-site .publication-subscribe:not(.publication-subscribe--about) > .publication-subscribe__note { grid-column: 1; }
  body.publication-site .archive-page .posts { grid-template-columns: minmax(0, 1fr) !important; }
  body.publication-site .tag-page-post-card { gap: 24px; }
  body.publication-site .tag-page-post-card__container { gap: 20px; }
  /* Story's rail disappears at tablet widths; avoid a second gutter inside
     the now-contained reading column. Keep the existing prose caps. */
  body.publication-site .story-content > * { width: 100%; }
  body.publication-site .story-content .story-image-cluster,
  body.publication-site .story-content .kg-card.kg-width-wide { width: 100%; }
}
@media (max-width: 600px) {
  body.publication-site .publication-subscribe--about { grid-template-columns: minmax(0, 1fr); }
  body.publication-site .publication-subscribe form { grid-template-columns: minmax(0, 1fr); }
  body.publication-site .tag-page-post-card { flex-direction: column; gap: 16px; }
  body.publication-site .tag-page-post-card__container { flex-direction: column; align-items: flex-start; }
  .reading-page .reading-section__header { grid-template-columns: minmax(0, 1fr); }
}