.issue-title {
  margin-top: 36px;
  margin-bottom: 12px;
  font-family: var(--serif);
}

.home-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.15s ease;
}
.home-link:hover {
  opacity: 0.8;
}

.section-heading {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1.4;
  font-weight: normal;
  color: var(--accent);
  margin-bottom: 32px;
  border-bottom: 2px solid var(--dune);
  padding-bottom: 12px;
}

.article {
  margin-bottom: 56px;
  scroll-margin-top: 28px;
  overflow-wrap: anywhere;
}
.article:focus-visible, .share-btn:focus-visible, .home-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}
.article:last-child {
  margin-bottom: 0;
}

.article-title {
  font-family: var(--serif);
  font-size: 27px;
  line-height: 1.25;
  margin-bottom: 16px;
  font-weight: normal;
  letter-spacing: -0.01em;
}

.article-placeholder {
  font-style: italic;
  color: var(--gray);
}

.article-figure {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 28px auto;
}
.article-figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
.article-figure--lead {
  margin-top: 20px;
}
body[data-city="naples"] .article-figure {
  width: 60%;
}
body[data-city="naples"] .article-figure img {
  border-radius: 8px;
}

.share-ctrl {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--dune);
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  width: fit-content;
}
.share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.share-btn img {
  width: 18px;
  height: 18px;
}

.share-fallback {
  font-family: var(--sans);
  font-size: 13px;
  word-break: break-all;
}

.share-fallback-container {
  display: none;
}
.share-fallback-container.is-visible {
  display: block;
}

.share-fallback-input {
  width: 100%;
  padding: 10px;
  font-family: var(--sans);
  font-size: 13px;
  border: 1px solid var(--dune);
  background: var(--paper);
  color: var(--ink);
}
.share-fallback-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.share-status {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--accent);
  min-height: 1.5em;
}

.calendar-intro {
  margin-bottom: 24px;
}

.calendar-root {
  margin-top: 12px;
}

.calendar-filters {
  border: none;
  padding: 0;
  margin: 0 0 24px;
}

.calendar-legend {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.calendar-legend span {
  font-weight: normal;
}
.calendar-filter-hint {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 14px;
}

.calendar-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.calendar-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 44px;
  border: 1px solid var(--dune);
  border-radius: 20px;
  cursor: pointer;
  background: var(--paper);
  transition: all 0.15s ease;
  user-select: none;
}
.calendar-filter-pill:hover {
  border-color: var(--accent);
}
.calendar-filter-pill:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.calendar-filter-pill:has(input:checked) {
  border-color: var(--accent);
  background: var(--paper);
}

.calendar-filter-pill input {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.calendar-root .pill-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 1px;
}
.calendar-filter-pill input:not(:checked) ~ .pill-label {
  font-weight: normal;
}
.calendar-filter-pill input:not(:checked) ~ .vibe-mark {
  border-color: var(--gray);
  color: var(--gray);
}

/* Rows revealed by the "Show past events" toggle read as past
   (Ian AUTH 2026-10-05); nothing else about the row changes. */
.calendar-row--past {
  opacity: 0.55;
}

.calendar-filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.calendar-count {
  order: -1;
  color: var(--ink);
  font: 12px var(--sans);
}
.calendar-count:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.calendar-reset:disabled {
  opacity: 0.6;
  cursor: default;
}

.calendar-root .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.calendar-root [hidden] {
  display: none !important;
}

.calendar-row {
  padding: 14px 0;
  overflow-wrap: anywhere;
}
.calendar-row + .calendar-row {
  border-top: 1px solid var(--dune);
}

.calendar-summary {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
  row-gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  min-height: 44px;
}
.calendar-summary::-webkit-details-marker {
  display: none;
}
.calendar-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.calendar-brief-date {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  grid-column: 1;
  grid-row: 1 / 3;
  margin-top: 3px;
}

.calendar-brief-title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  grid-column: 2 / -1;
}

.calendar-brief-marks {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.calendar-root .vibe-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

/* SLC Designer icons (Ian AUTH 2026-10-05) sit inside the same 22px circle
   as letter marks; the image carries the sizing. Letter marks are
   unaffected. */
.calendar-root .vibe-mark img {
  display: block;
  width: 18px;
  height: 18px;
}

.calendar-toggle {
  grid-column: 3;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font: 12px var(--sans);
  white-space: nowrap;
}
.calendar-root--plain .calendar-summary {
  grid-template-columns: 60px minmax(0, 1fr);
}
.calendar-root--plain .calendar-brief-description {
  grid-column: 2;
  grid-row: 2;
  color: var(--ink);
  font: 17px/1.45 var(--serif);
}
.calendar-root--plain .calendar-toggle {
  grid-column: 2;
  grid-row: 3;
}
.calendar-see-less,
.calendar-event[open] .calendar-see-more {
  display: none;
}
.calendar-event[open] .calendar-see-less {
  display: inline;
}
.calendar-expand-icon {
  font-family: var(--sans);
  font-size: 20px;
  color: var(--gray);
  flex: 0 0 auto;
  transition: transform 0.2s ease;
  font-weight: 300;
}
.calendar-event[open] .calendar-expand-icon {
  transform: rotate(45deg);
  color: var(--ink);
}

.calendar-details {
  margin-top: 16px;
  padding-left: 76px;
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

.calendar-details p {
  margin-bottom: 10px;
  line-height: 1.5;
}
.calendar-details p strong {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-right: 6px;
  font-weight: 600;
}

.calendar-extra-detail {
  margin-top: 16px;
}

.calendar-vibe {
  font-family: var(--sans);
  font-size: 15px;
}

.calendar-empty {
  padding: 32px 0;
  text-align: center;
}

.calendar-notes {
  margin-top: 40px;
  border-top: 1px solid var(--dune);
}
.calendar-note {
  padding-top: 28px;
}
.calendar-note-title {
  margin-bottom: 14px;
  color: var(--accent);
  font: normal 22px/1.3 var(--serif);
}
.calendar-note p:last-child {
  margin-bottom: 0;
}
.calendar-intro a,
.calendar-note a {
  overflow-wrap: anywhere;
}

.feature-detail {
  margin-bottom: 10px;
}
.feature-detail:last-of-type {
  margin-bottom: 24px;
}

@media (max-width: 600px) {
  .calendar-summary {
    grid-template-columns: 54px minmax(0, 1fr) auto;
    column-gap: 12px;
  }
  .calendar-brief-date {
    font-size: 13px;
  }
  .calendar-brief-title {
    font-size: 18px;
  }
  .calendar-details {
    padding-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-filter-pill,
  .calendar-expand-icon {
    transition: none;
  }
}

.speaker-tip {
  background: var(--paper);
  border: 1px solid var(--dune);
  padding: 24px;
  margin-bottom: 40px;
  /* Bare URLs in tips sit outside .article, which carries the wrap rule. */
  overflow-wrap: anywhere;
}
/* Same bare-URL wrap for section intros (Ian AUTH 2026-10-07). */
.section-intro {
  overflow-wrap: anywhere;
}
.speaker-tip-title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.speaker-tip-content {
  margin-bottom: 18px;
}
.speaker-tip-content:last-child {
  margin-bottom: 0;
}

/* Shared-item highlight (Ian AUTH 2026-10-07): persistent settled look plus
   a one-time arrival emphasis. Programmatic focus on the shared target draws
   no outline; keyboard users still get the normal :focus-visible outline on
   articles that are not the shared target. */
.article.shared-target,
.calendar-row.shared-target {
  position: relative;
  scroll-margin-top: 32px;
  padding: 22px 24px 22px 28px;
  margin-left: -28px;
  margin-right: -24px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
  transition: background-color 1600ms ease, box-shadow 1600ms ease;
}
.article.shared-target,
.article.shared-target:focus,
.article.shared-target:focus-visible,
.calendar-row.shared-target,
.calendar-row.shared-target:focus,
.calendar-row.shared-target:focus-visible {
  outline: none;
}
.article.shared-target::before,
.calendar-row.shared-target::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
  opacity: .55;
}
.article.shared-target--arrive,
.calendar-row.shared-target--arrive {
  background: color-mix(in srgb, var(--accent) 9%, var(--paper));
  box-shadow: 0 1px 2px rgba(29,46,53,.04), 0 8px 24px rgba(29,46,53,.06);
  animation: shared-target-arrive 700ms ease-out;
}
@keyframes shared-target-arrive {
  from {
    background: var(--paper);
    box-shadow: none;
  }
  to {
    background: color-mix(in srgb, var(--accent) 9%, var(--paper));
    box-shadow: 0 1px 2px rgba(29,46,53,.04), 0 8px 24px rgba(29,46,53,.06);
  }
}
@media (max-width: 640px) {
  .article.shared-target,
  .calendar-row.shared-target {
    margin-left: -14px;
    margin-right: -14px;
    padding: 18px 16px 18px 20px;
  }
  .article.shared-target::before,
  .calendar-row.shared-target::before {
    left: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .article.shared-target,
  .article.shared-target--arrive,
  .calendar-row.shared-target,
  .calendar-row.shared-target--arrive {
    animation: none;
    transition: none;
  }
  /* Show the settled look directly: no arrival emphasis at all. */
  .article.shared-target--arrive,
  .calendar-row.shared-target--arrive {
    background: color-mix(in srgb, var(--accent) 4%, var(--paper));
    box-shadow: none;
  }
}

/* Issue Redesign Scope */
.issue-layout {
  font-family: var(--sans);
}

.issue-layout .page {
  padding-top: 64px;
}

.issue-layout .masthead {
  margin-bottom: 24px;
}

.issue-layout .issue-title {
  font-weight: 700;
  font-family: var(--serif);
}

.issue-layout .section-opener {
  border-bottom: 1px solid var(--dune);
  padding-bottom: 16px;
  margin-bottom: 40px;
}

.issue-layout .section-ornament {
  display: block;
  margin: 0.75rem auto;
  max-width: min(280px, 40%);
  height: auto;
  opacity: 0.9;
}

/* Accent mode (Ian AUTH 2026-10-08): the ornament sits inside the section
   heading as a small inline mark instead of a standalone block. Overrides
   the block sizing above (including the first-section variant) for this
   modifier only. */
.issue-layout .section-ornament.section-ornament--accent,
.issue-layout main > .major-section:first-child .section-ornament.section-ornament--accent {
  display: inline-block;
  height: 40px;
  width: auto;
  max-width: 96px;
  vertical-align: middle;
  margin: 0 12px 0 0;
}

@media (max-width: 600px) {
  .issue-layout .section-ornament.section-ornament--accent,
  .issue-layout main > .major-section:first-child .section-ornament.section-ornament--accent {
    height: 32px;
    max-width: 80px;
  }
}

.issue-layout .section-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 8px;
}

.issue-layout .section-heading {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--accent);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.issue-layout .major-section {
  padding: 72px 0;
}
.issue-layout .major-section + .major-section {
  border-top: 1px solid var(--dune);
}
.issue-layout .major-section > .section-content {
  padding-left: 12px;
}

/* Keep the opening prose above the fold without changing later sections. */
.issue-layout main > .major-section:first-child {
  padding-top: 0;
}
.issue-layout main > .major-section:first-child > .section-opener {
  padding-bottom: 12px;
  margin-bottom: 24px;
}
.issue-layout main > .major-section:first-child .section-ornament {
  max-width: min(180px, 40%);
  max-height: 56px;
  object-fit: contain;
  margin: 8px auto;
}

.issue-layout .article + .article {
  border-top: 1px solid var(--dune);
  padding-top: 48px;
  margin-top: 48px;
}

.issue-layout .article-title {
  font-family: var(--serif);
  font-weight: 500;
}

.issue-layout .calendar-brief-title {
  font-family: var(--serif);
  font-weight: 500;
}

.issue-layout p,
.issue-layout .article-body,
.issue-layout .calendar-brief-description {
  font-family: var(--sans);
  font-weight: 400;
}

.issue-layout .feature-detail,
.issue-layout .calendar-details p,
.issue-layout .calendar-brief-date,
.issue-layout .calendar-count,
.issue-layout .dateline,
.issue-layout figcaption {
  color: var(--gray);
  font-weight: 400;
}
.issue-layout .calendar-details .calendar-extra-detail {
  color: var(--ink);
}

/* Rich calendar details (Ian AUTH 2026-10-08): inside a row's extra detail
   paragraphs, bold is body-text emphasis, not the small uppercase gray label
   style used for When/Where/Cost. Long links wrap instead of overflowing. */
.issue-layout .calendar-details .calendar-extra-detail strong {
  font: inherit;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  margin-right: 0;
}

.issue-layout .calendar-details .calendar-extra-detail a {
  overflow-wrap: anywhere;
}

.issue-layout .feature-detail strong,
.issue-layout .calendar-details p strong {
  font-weight: 400;
  color: var(--gray);
}

/* Step indent for nested content */
.issue-layout .article-body,
.issue-layout .feature-detail {
  margin-left: 24px;
}
.issue-layout .share-ctrl {
  margin-left: 24px;
}
.issue-layout .calendar-brief-description {
  padding-left: 12px;
}

.issue-layout .calendar-details {
  padding-left: 92px; /* clear expanded calendar nesting */
}

@media (max-width: 600px) {
  .issue-layout .page {
    padding-top: 32px;
  }
  .issue-layout .major-section {
    padding: 48px 0;
  }
  .issue-layout .major-section > .section-content {
    padding-left: 8px;
  }
  .issue-layout .article-body,
  .issue-layout .feature-detail,
  .issue-layout .share-ctrl {
    margin-left: 12px;
  }
  .issue-layout .calendar-details {
    padding-left: 84px;
  }
  .issue-layout .calendar-brief-description {
    padding-left: 8px;
  }
}

/* Explore header art + photo grid (Ian AUTH 2026-10-07): these classes are
   only emitted by Explore items, so other cities are unaffected. Images
   never exceed the column, so no horizontal scroll on desktop or mobile. */
.article-header-art {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px;
}
.article-photos {
  display: grid;
  gap: 20px;
  margin: 28px 0;
  max-width: 100%;
}
.article-photo {
  margin: 0;
  min-width: 0;
}
.article-photo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  border-radius: 6px;
  background: var(--dune);
}
.article-photo figcaption,
.article-photo-credit {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray);
  margin-top: 8px;
}

/* Explore compact layout (Ian AUTH 2026-10-08): opt-in via
   issue.explore_layout = "compact". Header art and the photo grid shrink to
   65% of the column and center; per-photo captions and the photo credit stay
   under their photo, left-aligned to the photo's edge. Same 65% on mobile. It
   is relative to the column width. */
body[data-explore-layout="compact"] .article-header-art {
  width: 65%;
  margin: 0 auto 18px;
}
body[data-explore-layout="compact"] .article-photos {
  width: 65%;
  margin-left: auto;
  margin-right: auto;
}
body[data-explore-layout="compact"] .article-photo img {
  border-radius: 12px;
}

/* Optional map figure set (Ian AUTH 2026-10-08): a 2-up grid of figures with
   one shared credit, rendered only when the asset files exist. Item captions
   and the credit keep the existing .issue-layout figcaption look. */
.article-figure-set {
  margin: 28px 0;
}
.figure-set-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.figure-set-item {
  margin: 0;
  min-width: 0;
}
.figure-set-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.figure-set-item figcaption,
.figure-set-credit {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gray);
  margin-top: 8px;
}
@media (max-width: 600px) {
  .figure-set-grid {
    grid-template-columns: 1fr;
  }
}

/* Houston mobile masthead (Ian AUTH 2026-10-08): on phones the Issue 01
   title and the dateline sit tight under the logo so the Editor's Note
   starts higher. Desktop and other cities keep their spacing. */
@media (max-width: 600px) {
  body.issue-layout[data-issue-city="houston"] .page { padding-top: 20px; }
  body[data-issue-city="houston"] .masthead { margin-bottom: 16px; }
  body[data-issue-city="houston"] .issue-title { margin-top: 14px; margin-bottom: 2px; font-size: 26px; }
  body[data-issue-city="houston"] .dateline { margin-top: 0; padding-bottom: 12px; font-size: 11px; letter-spacing: 0.12em; }
}

/* Houston mobile event details (Ian AUTH 2026-10-08): on phones the long
   prose under See more spans the full column. When, Where, Cost, Vibe,
   short label rows (Hosted by, Produced by) and the share row keep their
   indent for hierarchy. Desktop and other cities are unchanged.
   Description prose takes the same 12px inset as City Hall .article-body (Ian AUTH 2026-10-08, 1:45 ET). */
@media (max-width: 600px) {
  body[data-issue-city="houston"] .calendar-details { padding-left: 0; }
  body[data-issue-city="houston"] .calendar-details > p:not(.calendar-extra-detail),
  body[data-issue-city="houston"] .calendar-details > .calendar-detail-meta { padding-left: 84px; }
  body[data-issue-city="houston"] .calendar-details > .share-ctrl { margin-left: 96px; }
  body[data-issue-city="houston"] .calendar-details > .calendar-extra-detail:not(.calendar-detail-meta) { margin-left: 12px; }
}

/* Section headers v2 (Ian AUTH 2026-10-08, 2:35 ET): the duplicate small
   eyebrow is gone and any section illustration sits to the RIGHT of the
   heading text, vertically centered, at its existing size. If text and
   image do not fit on one line, the image wraps below without overflow. */
.issue-layout .section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 16px;
  row-gap: 8px;
}
.issue-layout .section-heading .section-ornament,
.issue-layout main > .major-section:first-child .section-heading .section-ornament {
  flex: 0 0 auto;
  margin: 0;
}

/* Section jump nav (Ian AUTH 2026-10-08): one compact row of brand-colored
   links under the Editor's Note. Wraps tidily on narrow screens; in-flow,
   never fixed, so it cannot overlap the consent banner. */
.issue-layout .issue-jumpnav {
  margin: 20px 0 0;
}
.issue-layout .issue-jumpnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.issue-layout .issue-jumpnav li {
  margin: 0;
  padding: 0;
}
.issue-layout .issue-jumpnav a {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--paper);
  color: var(--accent);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.issue-layout .issue-jumpnav a:hover {
  background: var(--accent);
  color: var(--paper);
}
.issue-layout .issue-jumpnav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.issue-layout .section-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 24px;
}
@media (max-width: 600px) {
  .issue-layout .issue-jumpnav { margin-top: 16px; }
  .issue-layout .issue-jumpnav ul { gap: 6px 5px; }
  .issue-layout .issue-jumpnav a { padding: 7px 7px; font-size: 13px; }
}