/* STL Gateway Living — magazine chassis.
   Generated by scripts/pseo/publishing/magazine_tokens.py. Do not hand-edit:
   change the tokens and re-emit, or the two magazines drift apart again. */

:root {
  --paper:        #FAF8F4;
  --paper-tint:   #F2EDE4;
  --surface:      #FFFFFF;
  --ink:          #14120F;
  --muted:        #6E675C;
  --rule:         #DED7CC;
  --rule-strong:  #B9AE9E;
  --accent:       #9C7A3C;
  --accent-deep:  #7A5D2A;
  --deep:         #3A1F1C;

  --font-display: 'Bodoni Moda', Georgia, serif;
  --font-body:    'Newsreader', Georgia, 'Times New Roman', serif;
  --font-utility: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

  --measure:      42rem;
  --rail:         17rem;
  --page-max:     84rem;
  --gutter:       5rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 100%; scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.1875rem;      /* 19px */
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--paper); }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
}

.hero-eyebrow, .card-eyebrow, .home-eyebrow, .related-eyebrow,
.eyebrow, .lr-label, .capsule-label {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- masthead ---------- */

.masthead {
  background: var(--paper);
  border-bottom: 3px double var(--rule-strong);
  padding: 1.4rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
  max-width: var(--page-max);
  margin-inline: auto;
}
.masthead .logo-wrap {
  grid-column: 2;
  order: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
.masthead .logo-img { display: none; }   /* wordmark only — no bitmap logo */
.masthead .brand-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.7rem);
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.masthead .tagline {
  grid-column: 1;
  order: 1;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead > div:last-child { grid-column: 3; order: 3; justify-self: end; }
.masthead .nav-search, .masthead .header-cta a {
  font-family: var(--font-utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.masthead .header-cta { background: none; }
.masthead .header-cta a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding: 0 0 3px;
  background: none;
  border-radius: 0;
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 60;
}

/* ---------- homepage ---------- */

.page-wrapper {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page-wrapper.is-home { padding-top: 3.5rem; }

.home-eyebrow { text-align: left; margin-bottom: 1rem; }
.home-tagline {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  max-width: 22ch;
  margin-bottom: 3.5rem;
}

.magazine-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 2.75rem;
  row-gap: 4rem;
  padding-bottom: 5rem;
}

.page-card {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  text-decoration: none;
  border-top: 1px solid var(--rule);
  padding-top: 1.15rem;
}
.page-card h2 {
  font-size: 1.45rem;
  transition: color 160ms ease;
}
.page-card:hover h2 { color: var(--accent); }
.page-card .snippet {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}
.card-img-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-tint);
  order: -1;
}
/* <picture> defaults to inline, which leaves the inner img without a definite
   height to resolve object-fit against — the card then paints as an empty
   tint block even though the image loaded. */
.card-img-wrap picture,
.related-card-img picture,
.hero-img-wrap picture { display: block; width: 100%; height: 100%; }
.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.card-img-placeholder { display: none; }

/* The lead story runs full width with no rule above it — it is the front page. */
.page-card.card-lead {
  grid-column: span 12;
  border-top: 0;
  padding-top: 0;
  gap: 1.25rem;
}
.card-lead .card-img-wrap { aspect-ratio: 21 / 9; }
.card-lead .card-body {
  max-width: 52rem;
  margin-top: -4rem;
  background: var(--paper);
  padding: 2rem 3.5rem 0 0;
  position: relative;
}
.card-lead h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.card-lead .snippet { font-size: 1.0625rem; max-width: 40rem; }

.page-card.card-wide { grid-column: span 7; }
.page-card.card-wide h2 { font-size: 1.9rem; }
/* The wide card is a 7-col slot; a 4:3 crop there towers over its 5-col
   neighbour, so it takes a shallower ratio and the two tops align. */
.card-wide .card-img-wrap { aspect-ratio: 3 / 2; }
.page-card.card-wide + .page-card.card-support { grid-column: span 5; }

/* ---------- article hero ---------- */

/* Deployed markup nests as:
     .article-hero > .hero-img-wrap > (picture + .hero-scrim)
                   > .hero-content            (a SIBLING of the wrap)
   so the wrap owns the height and the content is positioned over it. */
.article-hero { position: relative; background: var(--deep); overflow: hidden; }
.hero-img-wrap {
  position: relative;
  min-height: clamp(24rem, 62vh, 40rem);
  overflow: hidden;
}
.hero-img-wrap picture { position: absolute; inset: 0; }
.hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: hero-settle 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes hero-settle { from { transform: scale(1.045); } to { transform: scale(1); } }

.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,0.10) 0%, rgba(20,18,15,0.30) 42%, rgba(20,18,15,0.78) 72%, rgba(20,18,15,0.94) 100%);
}
.hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0 var(--gutter) 3.5rem;
  color: var(--paper);
}
.hero-eyebrow { color: var(--paper); opacity: 0.85; display: block; margin-bottom: 1rem; }
.hero-h1 {
  color: var(--paper);
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  max-width: 18ch;
  margin-bottom: 1.1rem;
}
.hero-deck {
  color: rgba(250, 248, 244, 0.82);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-style: italic;
  line-height: 1.45;
  max-width: 46ch;
}

.meta-strip {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 1.1rem var(--gutter);
  font-family: var(--font-utility);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
}
.meta-strip .dot { margin-inline: 0.65rem; color: var(--rule-strong); }

.toc-chipbar {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-utility);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  scrollbar-width: none;
}
.toc-chipbar::-webkit-scrollbar { display: none; }
.toc-chipbar a {
  white-space: nowrap;
  text-decoration: none;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.toc-chipbar a:hover { color: var(--accent); }
.toc-chip-num { color: var(--accent); margin-right: 0.4rem; }

/* ---------- article body ---------- */

.page-wrapper.is-article, body.is-article .page-wrapper { padding-top: 3rem; }

.article-content {
  max-width: var(--measure);
  margin-left: 0;
  /* Room on the right for the field-note rail; collapses under 68rem. */
  margin-right: calc(var(--rail) + 3rem);
}
.article-content > * + * { margin-top: 1.35rem; }
.article-content h2 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  margin-top: 3.5rem;
}
.article-content h3 {
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  margin-top: 2.75rem;
}
.article-content ul, .article-content ol { padding-left: 1.25rem; }
.article-content li + li { margin-top: 0.5rem; }
.article-content a { color: var(--accent-deep); }

.section-image {
  width: calc(100% + var(--rail) + 3rem);
  max-width: none;
  margin-top: 2.75rem;
}
.section-image img { width: 100%; }
.section-image figcaption, .section-image .caption {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 0.6rem;
}

.snippet-bait {
  border-left: 2px solid var(--accent);
  background: none;
  border-radius: 0;
  padding: 0.3rem 0 0.3rem 1.5rem;
  margin-block: 2.25rem;
  font-size: 1.0625rem;
}
.snippet-bait strong:first-child {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.05rem);
  line-height: 1.22;
  border: 0;
  border-top: 3px double var(--rule-strong);
  border-bottom: 3px double var(--rule-strong);
  padding-block: 1.75rem;
  margin-block: 3rem;
  background: none;
  color: var(--ink);
}

/* ---------- field notes (the signature element) ----------
   .good-for-pill and .local-rec already exist inline in every article; the
   float pulls them into the right margin so the page reads as annotated
   editorial rather than a stack of callout boxes. */

.good-for-pill, .local-rec {
  float: right;
  clear: right;
  width: var(--rail);
  margin: 0.4rem calc(-1 * (var(--rail) + 3rem)) 1.75rem 3rem;
  background: none;
  border: 0;
  border-top: 1px solid var(--accent);
  border-radius: 0;
  padding: 0.85rem 0 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink);
}
/* The pill ships as <aside><span>Good for</span>…text…</aside> — the span is
   the label, so it becomes the note's standfirst rather than running into the
   sentence. */
.good-for-pill > span:first-child {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.local-rec {
  background: var(--paper-tint);
  border-top: 3px double var(--rule-strong);
  padding: 0.95rem 1.05rem 1.1rem;
}
.lr-label { display: block; margin-bottom: 0.5rem; }
.lr-quote { font-size: 0.93rem; line-height: 1.5; }
.lr-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- related / venues / guides ---------- */

.related-section, .venues-in-guide, .part-of-guides {
  clear: both;
  max-width: var(--page-max);
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.related-eyebrow { margin-bottom: 0.6rem; }
.related-heading { font-size: 1.9rem; margin-bottom: 2rem; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2.5rem;
}
.related-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}
.related-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-tint); }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; }
.related-card-img-empty { display: none; }
.related-card-title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; }
.related-card-snippet { color: var(--muted); font-size: 0.95rem; }
.venues-in-guide li, .part-of-guides a { font-size: 1rem; }

/* ---------- subscribe + footer ---------- */

.newsletter-block {
  background: var(--deep);
  color: var(--paper);
  border: 0;
  border-radius: 0;
  padding: 3.5rem var(--gutter);
  margin-top: 0;
  text-align: center;
}
.newsletter-block h2, .newsletter-block h3 { color: var(--paper); margin-bottom: 0.6rem; }
.newsletter-block p { color: rgba(250, 248, 244, 0.72); }
.newsletter-block a { color: var(--paper); }

.site-footer {
  clear: both;
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 3rem var(--gutter) 4rem;
  font-family: var(--font-utility);
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--paper);
}
.footer-inner {
  max-width: var(--page-max);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-brand { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ---------- venue + neighbourhood pages ----------
   These are emitted by lifestyle_pseo_pages.py with their own class
   vocabulary and (previously) their own hardcoded-hex stylesheet. They now
   inherit the chassis so the third style generation is gone. Their masthead
   is a two-child variant: <header class="masthead"><a class="brand">…<a
   class="subscribe">. */

.masthead:has(> a.brand) { grid-template-columns: 1fr auto; }
.masthead a.brand {
  grid-column: 1;
  justify-self: start;
  font-family: var(--font-display);
  font-size: 1.35rem;
  text-decoration: none;
}
.masthead a.subscribe {
  grid-column: 2;
  justify-self: end;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
}

.breadcrumb {
  max-width: var(--page-max);
  margin: 1.5rem auto 0;
  padding-inline: var(--gutter);
  font-family: var(--font-utility);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.breadcrumb a { text-decoration: none; }

/* Venue and neighbourhood pages put their content directly in <main>; article
   and index pages wrap theirs in .page-wrapper, which already owns the
   measure. Scoping this keeps the narrow column off the articles — an
   unscoped `main` rule squeezed every article body to 64px wide. */
main:not(:has(.page-wrapper)) {
  max-width: 44rem;
  margin-inline: auto;
  padding: 2.5rem var(--gutter) 4rem;
}
main:not(:has(.page-wrapper)) > * + * { margin-top: 1.25rem; }

.venue-eyebrow, .nb-eyebrow, .event-date {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
h1.venue-h1, h1.nb-h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); margin-top: 0.85rem; }
.venue-meta, .venue-addr, .venue-extra, .event-desc { color: var(--muted); font-size: 1rem; }
.venue-addr strong {
  font-family: var(--font-utility);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.venue-featured, .nb-intro {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-style: italic;
  line-height: 1.35;
  border-top: 3px double var(--rule-strong);
  padding-top: 1.75rem;
  margin-top: 2rem;
}
.venue-featured-source {
  font-family: var(--font-utility);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.9rem;
}

.venue-section-h { font-size: 1.6rem; margin-top: 3rem; }
.venue-refs { list-style: none; padding: 0; }
.venue-refs li, .event-item { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.venue-refs a, .event-title a { font-family: var(--font-display); font-size: 1.15rem; text-decoration: none; }
.event-list { list-style: none; padding: 0; }
.event-title { font-family: var(--font-display); font-size: 1.15rem; margin-block: 0.3rem; }

.venue-cta {
  display: inline-block;
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  margin-top: 1.5rem;
}

/* neighbourhood hubs — build_neighborhood_hubs.py.
   These pages have no wrapper element; the sections themselves carry the
   page frame. */
.hub-intro, .hub-collection {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hub-intro { padding-top: 3rem; }
.hub-h1 { font-size: clamp(2.5rem, 5.5vw, 4rem); margin-top: 0.9rem; }
.hub-card-body { display: contents; }
.hub-card-img-empty { display: none; }

.hub-eyebrow, .hub-collection-eyebrow {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.hub-intro p {
  font-family: var(--font-body);
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-style: italic;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
  margin: 1rem 0 3rem;
}
.hub-paragraph { max-width: var(--measure); }
.hub-collection { margin-top: 3.5rem; }
.hub-collection-heading { font-size: 1.8rem; margin: 0.6rem 0 1.75rem; }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2.75rem;
}
.hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-decoration: none;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
}
.hub-card-img { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-tint); order: -1; }
.hub-card-img img { width: 100%; height: 100%; object-fit: cover; }
.hub-card-title { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.18; }
.hub-card-snippet { color: var(--muted); font-size: 0.95rem; }
.hub-list { list-style: none; padding: 0; margin-top: 1.5rem; }
.hub-list-card { border-top: 1px solid var(--rule); padding: 1rem 0; }
.hub-list-title { font-family: var(--font-display); font-size: 1.15rem; text-decoration: none; }
.hub-list-snippet { color: var(--muted); font-size: 0.95rem; margin-top: 0.35rem; }

/* author page — build_author_page.py */
.role {
  font-family: var(--font-utility);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.75rem;
}
.bio { margin-top: 2rem; }
.bio p + p { margin-top: 1.2rem; }
.socials { margin-top: 3rem; border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.socials h2 { font-size: 1.3rem; margin-bottom: 0.85rem; }
.socials ul { list-style: none; padding: 0; }
.socials li { padding: 0.5rem 0; border-bottom: 1px solid var(--rule); }
.socials a { font-size: 0.98rem; text-decoration: none; }
.back-link {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}

/* venues index */
.container {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 3rem var(--gutter) 4rem;
}
.container > h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.intro {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--muted);
  max-width: 42ch;
  margin: 1rem 0 3rem;
}
.venues-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 3rem;
}
.venues-group-h {
  font-size: 1.35rem;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 0.5rem;
  margin-bottom: 0.85rem;
}
.venues-group-list { list-style: none; padding: 0; }
.venues-group-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
.venues-group-list a { font-family: var(--font-display); font-size: 1.05rem; text-decoration: none; }
.venue-type {
  font-family: var(--font-utility);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.subscribe-cta {
  background: var(--deep);
  border-radius: 0;
  padding: 3rem 2rem;
  margin-top: 4rem;
  text-align: center;
}
.subscribe-cta p {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--paper);
  margin-bottom: 1.25rem;
}
.subscribe-cta a {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--font-utility);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: 0;
}

footer {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 2.5rem var(--gutter) 3.5rem;
  text-align: center;
  font-family: var(--font-utility);
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--paper);
}
footer a { text-decoration: none; }

/* ---------- responsive ---------- */

@media (max-width: 68rem) {
  .article-content { margin-right: 0; }
  .section-image { width: 100%; }
  .good-for-pill, .local-rec {
    float: none;
    width: auto;
    margin: 2rem 0;
    background: var(--paper-tint);
    padding: 1rem 1.15rem 1.2rem;
    border-top-width: 2px;
  }
}

@media (max-width: 60rem) {
  :root { --gutter: 1.35rem; }
  body { font-size: 1.0625rem; }

  .masthead { grid-template-columns: 1fr auto; padding-block: 1rem; }
  .masthead .tagline { display: none; }
  .masthead .logo-wrap { grid-column: 1; justify-self: start; }
  .masthead > div:last-child { grid-column: 2; }

  .magazine-grid { row-gap: 3rem; }
  .page-card, .page-card.card-lead, .page-card.card-wide,
  .page-card.card-wide + .page-card.card-support { grid-column: span 12; }
  .card-lead .card-body { margin-top: 0; padding: 0; }
  .card-lead .card-img-wrap { aspect-ratio: 3 / 2; }

  .hero-scrim { min-height: 22rem; }
  .hero-content { padding-bottom: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-img-wrap img { animation: none; }
  * { transition: none !important; }
}

@media print {
  .masthead > div:last-child, .newsletter-block, .toc-chipbar, .scroll-progress { display: none; }
  body { background: #fff; font-size: 11pt; }
  .good-for-pill, .local-rec { float: none; width: auto; margin: 1rem 0; }
}