/* Not-Ship additions used across the site: header Support buttons and the /support/ page.
   Everything is prefixed "ns-" (or targets the new header items) so the rest of the theme is untouched. */

/* ---------- Shared colours and the sign-up form (homepage, articles, pop-up) ---------- */

:root {
  --ns-button-bg: #5478ea;      /* the Not-Ship accent blue, used for every blue on the site */
  --ns-button-text: #ffffff;
  --ns-muted: var(--color-gray-600);
  --ns-frame: var(--ghost-accent-color, #5478ea);
}

.dark-mode {
  --ns-muted: var(--color-gray-400);
}

/* ---------- Sign-up form (used by the hero and the closing sign-up) ---------- */

.ns-form {
  display: block; /* the theme hides anything with .loading/.success/.error; keep these forms visible */
  width: 100%;
  max-width: 34rem;
  margin: 0; /* the theme adds margins to forms on wider screens */
}

.ns-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ns-form-input {
  flex: 1 1 16rem;
  min-width: 0;
  height: 3.25rem;
  box-sizing: border-box;
  padding: 0 1rem;
  border: 2px solid var(--color-border-primary);
  border-radius: 0;
  background: var(--color-bg-primary);
  color: var(--color-heading-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}

.ns-form-input:focus {
  outline: 2px solid var(--ns-button-bg);
  outline-offset: 2px;
}

.ns-form-button {
  flex: 0 0 auto;
  height: 3.25rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 0;
  background: var(--ns-button-bg);
  color: var(--ns-button-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s ease-in-out;
}

.ns-form-button:hover {
  opacity: .88;
}

.ns-form-button:focus-visible {
  outline: 2px solid var(--color-heading-primary);
  outline-offset: 2px;
}

.ns-form-button-loading {
  display: none;
}

.ns-form.loading .ns-form-button-label {
  display: none;
}

.ns-form.loading .ns-form-button-loading {
  display: inline;
}

.ns-form.loading .ns-form-button {
  cursor: progress;
  opacity: .75;
}

.ns-form-success,
.ns-form-error {
  display: none;
}

.ns-form.success .ns-form-row {
  display: none;
}

.ns-form.success .ns-form-success {
  display: block;
}

.ns-form-success-text {
  margin: 0;
  font-size: 1.0625rem;
}

.ns-form-inbox:not(:empty) {
  margin-top: 0.75rem;
}

.ns-inbox-button {
  display: inline-block;
  padding: 0.7rem 1.25rem;
  background: var(--ns-button-bg);
  color: var(--ns-button-text);
  font-weight: 600;
  text-decoration: none;
}

.ns-inbox-note {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ns-muted);
}

.ns-form.error .ns-form-error {
  display: block;
  margin: 0.625rem 0 0;
  color: #c92a1f;
  font-size: 0.9375rem;
}


/* ---------- Header ---------- */

.action-item-support-link .button-link {
  font-weight: 600;
  text-decoration: none;
}

.action-item-support-link .button-link:hover,
.action-item-support-link .button-link:focus {
  text-decoration: underline;
  text-decoration-color: var(--ghost-accent-color);
  text-decoration-thickness: 2px;
}

.action-item-subscribe a.button,
.action-item-subscribe-header a.button {
  color: inherit;
  text-decoration: none;
}

.action-item-account-icon .button-icon {
  font-size: 1.125rem;
}

/* Phones: Support moves to the menu; the red button moves under the logo */
@media (max-width: 500px) {
  .action-item-support-link {
    display: none;
  }
}

/* ---------- Support page ---------- */

.ns-support {
  --ns-button-bg: #5478ea;
  --ns-muted: var(--color-gray-600);
  padding-bottom: 4rem;
}

.dark-mode .ns-support {
  --ns-muted: var(--color-gray-400);
}

.ns-support-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  box-sizing: border-box;
  max-width: 45rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

.ns-support-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ns-support-lede {
  margin: 0;
  max-width: 37.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-gray-700);
}

.dark-mode .ns-support-lede {
  color: var(--color-gray-300);
}

.ns-support-byline {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  color: var(--ns-muted);
}

.ns-support-thanks {
  margin: 0.5rem 0 0;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ghost-accent-color);
  background: var(--color-bg-primary);
  font-size: 0.9375rem;
}

.ns-cadence {
  display: inline-flex;
  margin-top: 1rem;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
}

.ns-cadence[hidden] {
  display: none;
}

.ns-cadence-option {
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 0;
  background: transparent;
  color: var(--color-heading-primary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}

.ns-cadence-option.is-active {
  background: var(--color-heading-primary);
  color: var(--color-bg-primary);
}

.ns-cadence-save {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
}

.ns-tiers {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  box-sizing: border-box;
  max-width: 55rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0 2rem; /* extra room on the left for the highlight frame */
}

.ns-tier {
  position: relative;
  display: flex;
}

/* The highlighted tier's blue frame sits behind the card, offset down and to the left,
   so the tops of all the tier cards stay level */
.ns-tier:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid var(--ghost-accent-color);
  transform: translate(-0.75rem, 0.75rem);
  pointer-events: none;
}

.ns-tier-card {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem 1.375rem 1.375rem;
  position: relative;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
}

.ns-tier-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5478ea;
}

.ns-tier-price {
  margin: 0;
  color: var(--color-heading-primary);
}

.ns-tier-amount {
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ns-tier-per {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--ns-muted);
}

.ns-tier-tagline {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-heading-primary);
}

.ns-tier-benefits {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0.25rem 0 0;
  padding: 0;
  list-style: none;
}

.ns-tier-benefits li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ns-tier-benefits svg {
  flex: 0 0 18px;
  margin-top: 3px;
  color: #5478ea;
}

.ns-tier-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.125rem;
  margin-top: 0.5rem;
  border: 2px solid #5478ea;
  background: var(--color-bg-primary);
  color: #5478ea;
  font-weight: 600;
  text-decoration: none;
}

.ns-tier:first-child .ns-tier-button {
  background: #5478ea;
  color: #ffffff;
}

.ns-tier-button:hover,
.ns-tier-button:focus {
  opacity: .88;
  text-decoration: none;
}

.ns-support-options {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-sizing: border-box;
  max-width: 55rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 0 2rem; /* lines up with the tier cards above */
}

.ns-support-option {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem 1.25rem;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
}

.ns-support-option-title {
  margin: 0;
  font-weight: 700;
  color: var(--color-heading-primary);
}

.ns-support-option-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ns-support-option-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0 1.125rem;
  background: #5478ea;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.ns-support-option-link {
  margin-top: 0.25rem;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #5478ea;
  text-decoration: none;
}

.ns-support .ns-rule {
  margin: 3rem auto 0;
}

.ns-support-body {
  box-sizing: border-box;
  max-width: 40rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 0;
}

@media (min-width: 640px) {
  .ns-support-lede {
    font-size: 1.125rem;
  }

  .ns-cadence-option {
    padding: 0 1.375rem;
  }
}

@media (min-width: 768px) {
  .ns-tiers {
    flex-direction: row;
    align-items: stretch;
    gap: 3rem;
    padding-top: 3rem;
  }

  .ns-tier {
    flex: 1 1 0;
    min-width: 0;
  }

  .ns-tier-card {
    padding: 1.875rem 1.75rem 1.75rem;
  }

  .ns-support-options {
    flex-direction: row;
    padding-top: 3rem;
  }

  .ns-support-option {
    flex: 1 1 0;
    min-width: 0;
    padding: 1.25rem 1.375rem;
  }

  .ns-support .ns-rule {
    margin-top: 3.5rem;
  }
}

/* Tighter spacing for the questions section under the tiers */
.ns-support-body > :first-child {
  margin-top: 0;
}

.ns-support-body h2 {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
}

.ns-support-body h3 {
  margin: 1.75rem 0 0.375rem;
  font-size: 1.0625rem;
}

.ns-support-body p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------- About page (page-about.hbs) ---------- */

.ns-about {
  --ns-muted: var(--color-gray-600);
  padding-bottom: 4rem;
}

.dark-mode .ns-about {
  --ns-muted: var(--color-gray-400);
}

.ns-about-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  box-sizing: border-box;
  max-width: 55rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

.ns-about-label,
.ns-about-body h6 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5478ea;
}

.ns-about-title {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.75rem); /* same as the homepage and support headlines */
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.ns-about-feature {
  box-sizing: border-box;
  max-width: 65rem;
  margin: 2rem auto 0;
  padding: 0 1.25rem;
}

.ns-about-feature img {
  display: block;
  width: 100%;
  height: auto;
}

/* Same column width and text size as the article pages (the theme's .post-body) */
.ns-about-body {
  padding-top: 2.5rem;
}

.ns-about-body h2 {
  margin: 3rem 0 1rem;
  font-size: 1.5rem;
  line-height: 1.2;
}

.ns-about-body > h2:first-child {
  margin-top: 0;
}

.ns-about-body h6 {
  margin: 2.5rem 0 0.5rem;
}

.ns-about-body h6 + h2 {
  margin-top: 0;
}

.ns-about-body hr {
  margin: 3.5rem auto;
}

.ns-about-body .ns-about-previously {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ns-muted);
}

/* Photo beside the bio (built by ns-about.js from an image card followed by the label/name) */
.ns-about-person {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 0 1rem;
}

.ns-about-person-photo figure {
  margin: 0;
}

.ns-about-person-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 6;
  object-fit: cover;
  border: 2px solid var(--color-border-primary);
  box-sizing: border-box;
}

.ns-about-person-photo figcaption {
  display: none;
}

.ns-about-person-text > :first-child {
  margin-top: 0;
}

.ns-about-person-text h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
}

/* Promises: bulleted list where each item starts with a bold label */
.ns-about-body ul.ns-about-promises {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--color-gray-300);
}

.ns-about-body ul.ns-about-promises li {
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid var(--color-gray-300);
}

.ns-about-body ul.ns-about-promises li::before,
.ns-about-body ul.ns-about-promises li::marker {
  content: none;
}

.ns-about-promise-label {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5478ea;
}

/* Ghost's Signup card, restyled as the framed sign-up box used across the site */
#main.ns-about .kg-signup-card {
  margin: 3rem 0.75rem 3rem 0;
  padding: 0;
  border: 3px solid var(--ghost-accent-color);
  border-radius: 0;
  background: transparent !important;
}

#main.ns-about .kg-signup-card-content {
  padding: 1.75rem 1.5rem;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  transform: translate(0.75rem, -0.75rem);
}

#main.ns-about .kg-signup-card-text {
  align-items: center;
  padding: 0; /* Ghost adds its own padding here */
  text-align: center;
}

#main.ns-about .kg-signup-card-heading {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-heading-primary) !important;
}

#main.ns-about .kg-signup-card-subheading {
  margin: 0.5rem 0 0;
  font-size: 1rem;
  color: var(--color-gray-700) !important;
}

#main.ns-about .kg-signup-card-form {
  width: 100%;
  max-width: 28rem;
  margin: 1.25rem auto 0;
}

#main.ns-about .kg-signup-card-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
}

#main.ns-about .kg-signup-card-input {
  flex: 1 1 14rem;
  min-width: 0;
  height: 3.125rem;
  box-sizing: border-box;
  padding: 0 0.875rem;
  border: 2px solid var(--color-border-primary);
  border-radius: 0;
  background: var(--color-bg-primary);
  color: var(--color-heading-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
}

#main.ns-about .kg-signup-card-button {
  flex: 0 0 auto;
  height: 3.125rem;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 0;
  background: #5478ea !important;
  color: #ffffff !important;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
}

#main.ns-about .kg-signup-card-success,
#main.ns-about .kg-signup-card-error {
  color: var(--color-heading-primary) !important;
}

#main.ns-about .kg-signup-card-disclaimer {
  margin: 0.875rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ns-muted) !important;
}

/* Closing boxes: Keep it independent + Let's talk! */
.ns-about-end {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  box-sizing: border-box;
  max-width: 55rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 0;
}

.ns-about-box {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
}

.ns-about-box-title {
  margin: 0;
  font-size: 1.25rem;
}

.ns-about-box-text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.ns-about-box-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.5rem;
  padding: 0 1.125rem;
  background: #5478ea;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
}

.ns-about-box-button:hover,
.ns-about-box-button:focus {
  opacity: .88;
  text-decoration: none;
}

.ns-about-box-email {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: var(--color-heading-primary);
}

@media (min-width: 640px) {
  .ns-about-body h2 {
    font-size: 1.75rem;
  }
}

@media (min-width: 900px) {
  /* Photo + bio break out of the reading column on wider screens */
  .ns-about-person {
    position: relative;
    left: 50%;
    width: min(65rem, calc(100vw - 2.5rem));
    transform: translateX(-50%);
    flex-direction: row;
    align-items: flex-start;
    gap: 3.5rem;
  }

  .ns-about-person-photo {
    flex: 0 0 18.75rem;
  }

  .ns-about-person-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ns-about-person-text h2 {
    font-size: 2.25rem;
  }

  .ns-about-end {
    flex-direction: row;
  }

  .ns-about-box {
    flex: 1 1 0;
    min-width: 0;
    padding: 1.5rem 1.625rem;
  }
}

/* Phones: the feature image (three illustrations in one wide image) is cropped to the middle one so it isn't tiny */
@media (max-width: 639px) {
  .ns-about-feature img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 50%;
  }
}

/* ---------- Sign in (header on desktop, + menu on phones) ---------- */

.action-item-signin-link .button-link {
  font-weight: 600;
}

@media (max-width: 500px) {
  .action-item-signin-link {
    display: none;
  }
}

.sidebar-bottom .ns-sidebar-signin {
  margin-top: 0.75rem;
  font-weight: 600;
}

/* ---------- End of article (partials/ns-article-end.hbs) ---------- */

.ns-article-end {
  box-sizing: border-box;
  max-width: 44rem;
  margin: 3.5rem auto 0;
  padding: 0 1.25rem;
}

.ns-article-end {
  padding-right: 2rem; /* room for the card's offset */
}

.ns-article-end-frame {
  border: 3px solid var(--ns-frame);
}

.ns-article-end-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: 1.75rem 1.5rem;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  text-align: center;
  transform: translate(0.75rem, -0.75rem);
}

.ns-article-end-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5478ea;
}

.ns-article-end-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
}

.ns-article-end-text {
  margin: 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: balance;
}

.ns-article-end-card .ns-form {
  margin-top: 0.375rem;
}

.ns-article-end-card .ns-form-row {
  justify-content: center;
}


.ns-article-end-button {
  flex: 0 0 auto;
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  padding: 0 1.125rem;
  background: #5478ea;
  color: #ffffff;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}

.ns-article-end-button:hover,
.ns-article-end-button:focus {
  opacity: .88;
  text-decoration: none;
}

@media (min-width: 640px) {
  .ns-article-end-card {
    padding: 2rem 2.25rem;
  }

  .ns-article-end-title {
    font-size: 1.625rem;
  }

}

@media (max-width: 639px) {
  .ns-article-end-card .ns-form-row {
    flex-direction: column;
  }

  .ns-article-end-card .ns-form-input,
  .ns-article-end-card .ns-form-button {
    flex-basis: auto;
    width: 100%;
  }
}

/* ---------- Article pop-up (partials/ns-popup.hbs) ---------- */
/* Red card (#ea5242) with white text and a thin white line inside the edge.
   White on this red only reads well when large and bold, so the headline is big and the button is white with dark red text. */

.ns-popup {
  --ns-popup-red: #ff0020; /* the bright red of the "Let's chart the chaos." sign-up boxes in posts */
  --ns-popup-ink: #ffffff;
  --ns-popup-line: transparent;     /* card border */
  --ns-popup-btn-bg: #ffffff;
  --ns-popup-btn-fg: #9e2a1c;
  --ns-popup-field-line: #ffffff;
  position: fixed;
  right: 1.75rem;
  bottom: 1.75rem;
  z-index: 9999;
  box-sizing: border-box;
  width: 26.25rem;
  max-width: calc(100vw - 2.25rem);
  padding: 1.5rem;
  border: 2px solid var(--ns-popup-line);
  background: var(--ns-popup-red);
  box-shadow: 0 12px 32px rgba(11, 17, 80, 0.22), 0 2px 6px rgba(11, 17, 80, 0.12); /* soft drop shadow */
  color: var(--ns-popup-ink);
  transform: translateY(calc(100% + 3rem));
  transition: transform .35s ease;
}

/* thin white line just inside the edge */
.ns-popup::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.ns-popup[hidden] {
  display: none;
}

.ns-popup.is-visible {
  transform: translateY(0);
}

.ns-popup-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  background: transparent;
  color: var(--ns-popup-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.ns-popup-close:focus-visible {
  outline: 2px solid var(--ns-popup-ink);
  outline-offset: -4px;
}

.ns-popup-label {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ns-popup-ink);
}

.ns-popup-title {
  margin: 0;
  padding-right: 2.25rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
  letter-spacing: -0.01em;
  color: var(--ns-popup-ink);
}

.ns-popup-text {
  margin: 0.375rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ns-popup-ink);
  text-wrap: balance;
}

/* After signing up, only the confirmation stays */
.ns-popup.is-done .ns-popup-label,
.ns-popup.is-done .ns-popup-title,
.ns-popup.is-done .ns-popup-text {
  display: none;
}

.ns-popup.is-done .ns-form {
  margin-top: 0;
  padding-right: 2.25rem;
}

.ns-popup .ns-form {
  max-width: none;
  margin-top: 0.875rem;
}

.ns-popup .ns-form-row {
  flex-wrap: nowrap;
  gap: 6px;
}

.ns-popup .ns-form-input {
  flex: 1 1 auto;
  height: 2.875rem;
  min-width: 0;
  border: 2px solid var(--ns-popup-field-line);
  background: #ffffff;
  font-size: 0.9375rem;
}

.ns-popup .ns-form-input:focus {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ns-popup .ns-form-button {
  height: 2.875rem;
  padding: 0 1rem;
  background: var(--ns-popup-btn-bg);
  color: var(--ns-popup-btn-fg);
  font-size: 0.9375rem;
  font-weight: 700;
}

.ns-popup .ns-form-button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.ns-popup .ns-form-success-text,
.ns-popup .ns-inbox-note {
  color: var(--ns-popup-ink);
}

.ns-popup .ns-inbox-button {
  background: var(--ns-popup-btn-bg);
  color: var(--ns-popup-btn-fg);
}

.ns-popup .ns-form.error .ns-form-error {
  color: var(--ns-popup-ink);
  font-weight: 600;
}

@media (max-width: 500px) {
  .ns-popup {
    right: 0.75rem;
    bottom: 0.75rem;
    left: 1.25rem;
    width: auto;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-popup {
    transition: none;
  }
}

/* + menu: the Subscribe button uses the same deeper blue as the other sign-up buttons */
.sidebar-bottom .button-solid {
  background-color: #5478ea;
}

/* ---------- Paywall (partials/members-cta.hbs) ---------- */
/* The framed supporter box reuses the end-of-article frame and card. */

.post-teaser {
  position: relative;
}

.post-teaser::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7rem;
  background: linear-gradient(rgba(246, 246, 247, 0), var(--color-bg-main));
  pointer-events: none;
}

.ns-paywall {
  box-sizing: border-box;
  max-width: 44rem;
  margin: 2rem auto 0;
  padding: 0 2rem 0 1.25rem; /* room for the card's offset */
}

.ns-paywall-card {
  gap: 0.75rem;
}

.ns-paywall-title {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.2;
  text-wrap: balance;
}

.ns-paywall-text {
  margin: 0;
  max-width: 32rem;
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: balance;
}

.ns-nowrap {
  white-space: nowrap;
}

.ns-paywall-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  margin-top: 0.5rem;
  padding: 0 1.25rem;
  background: #5478ea;
  color: #ffffff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
}

.ns-paywall-button:hover,
.ns-paywall-button:focus {
  opacity: .88;
  color: #ffffff;
  text-decoration: none;
}

/* "Already a supporter? Sign in" in the blue mono label style */
.ns-paywall-signin {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5478ea;
}

.ns-paywall-signin button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.ns-paywall-card .ns-form {
  width: 100%;
  max-width: 28rem;
  margin-top: 0.375rem;
}

/* Free sign-up under the box */
.ns-paywall-free {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.ns-paywall-or {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 26rem;
  margin: 3rem 0 1.75rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ns-muted);
}

.ns-paywall-or::before,
.ns-paywall-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border-primary);
}

.ns-paywall-free-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.ns-paywall-free .ns-form {
  width: 100%;
  max-width: 28rem;
  margin-top: 0.5rem;
}

.ns-paywall-free .ns-form-row {
  flex-wrap: nowrap;
}

.ns-paywall-free .ns-form-button {
  border: 2px solid #5478ea;
  background: var(--color-bg-primary);
  color: #5478ea;
}

@media (min-width: 640px) {
  .ns-paywall-title {
    font-size: 1.625rem;
  }
}

@media (max-width: 639px) {
  .ns-paywall .ns-article-end-card {
    padding: 1.5rem 1.25rem;
  }

  .ns-paywall-title {
    font-size: 1.375rem;
  }

  .ns-paywall-or {
    margin: 2.5rem 0 1.5rem;
  }

  .ns-paywall-free .ns-form-input {
    height: 2.875rem;
  }

  .ns-paywall-free .ns-form-button {
    height: 2.875rem;
    padding: 0 0.875rem;
  }

  .ns-paywall-card .ns-form-row {
    flex-direction: column;
  }

  .ns-paywall-card .ns-form-input,
  .ns-paywall-card .ns-form-button {
    width: 100%;
  }
}

/* ---------- Topics row (partials/ns-topics.hbs) ---------- */

.ns-section-heading .ns-section-title {
  margin-bottom: 0.75rem;
}

.ns-topics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.375rem;
  margin: 0 0 1.75rem;
  padding-bottom: 0.5rem; /* room for the underline */
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ns-topics-label {
  color: var(--ns-muted);
}

.ns-topics-link {
  color: #5478ea;
  text-decoration: none;
  white-space: nowrap;
}

.ns-topics-link:hover {
  color: #5478ea;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.ns-topics-link.is-active {
  color: var(--color-heading-primary);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #5478ea;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Topic pages: the row sits under the topic name */
.archive-header .ns-topics {
  justify-content: center;
  margin: 1.5rem 0 0;
}

/* Phones: one row that scrolls sideways */
@media (max-width: 767px) {
  .ns-topics {
    flex-wrap: nowrap;
    gap: 1.125rem;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: -1.25rem;
    padding-right: 1.25rem;
  }

  .ns-topics::-webkit-scrollbar {
    display: none;
  }

  .archive-header .ns-topics {
    justify-content: flex-start;
    margin-left: -1.25rem;
    padding-left: 1.25rem;
  }
}

/* Homepage: while a topic's issues are loading */
.post-feed.ns-feed-loading {
  opacity: 0.4;
  transition: opacity .15s ease;
}

/* Tablets and small laptops (up to 820px): only the red button stays in the header,
   so it can't run into the logo. Sign in and Support are in the + menu. */
@media (max-width: 820px) {
  .action-item-signin-link,
  .action-item-support-link {
    display: none;
  }
}

/* Free subscribers up to 700px: "Support Not-Ship" is too long to sit beside the logo,
   so it moves under the logo, as on phones */
@media (max-width: 700px) {
  .navbar:has(.action-item-account-icon) .actions .action-item-subscribe {
    display: none;
  }

  .navbar:has(.action-item-account-icon) .action-item-subscribe-header {
    display: block;
  }
}

/* Blue mono labels: a slightly heavier weight (DM Mono Medium) so they don't look faint */
.ns-tier-name,
.ns-about-label,
.ns-about-body h6,
.ns-about-promise-label,
.ns-article-end-label,
.ns-paywall-signin,
.ns-topics-link {
  font-weight: 500;
}

/* Support page: free box above the tiers, gift box below; both centred */
.ns-support-free,
.ns-support-options .ns-support-option {
  box-sizing: border-box;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  align-items: center;
  text-align: center;
}

.ns-support-free {
  margin-top: 2rem;
}

.ns-support-free + .ns-cadence {
  margin-top: 2.5rem;
}

.ns-support-free .ns-support-option-button {
  align-self: center;
}

.ns-support-options {
  padding-left: 1.25rem;
}

@media (min-width: 640px) {
  .ns-support-options .ns-support-option {
    flex: 0 1 34rem;
  }

  .ns-support-options {
    justify-content: center;
  }
}

.ns-support-free .ns-support-option-text,
.ns-support-options .ns-support-option-text,
.ns-support-title {
  text-wrap: balance;
}

/* Free and gift options: lighter, without the box, so the tier cards stay the focus */
.ns-support-free,
.ns-support-options .ns-support-option {
  padding: 0;
  border: 0;
  background: transparent;
}

.ns-support-free .ns-support-option-button {
  border: 2px solid #5478ea;
  background: var(--color-bg-primary);
  color: #5478ea;
}

.ns-support-free .ns-support-option-button:hover,
.ns-support-free .ns-support-option-button:focus {
  color: #5478ea;
}

/* Support page: no red Subscribe!/Support Not-Ship button in the header - readers are already here */
.page-support .action-item-subscribe,
.page-support .actions-under-header {
  display: none !important;
}

/* Support page: the free option as one line between thin rules, above the tiers */
.ns-support-free-line {
  box-sizing: border-box;
  max-width: 34rem;
  margin: 1.75rem auto 0;
  padding: 0.75rem 0;
  border-top: 1px solid #d6d6db;
  border-bottom: 1px solid #d6d6db;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-wrap: balance;
}

.ns-support-free-line strong {
  color: var(--color-heading-primary);
}

.ns-support-free-line a {
  color: #5478ea;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.ns-support-free-line + .ns-cadence {
  margin-top: 2rem;
}

/* Support page toggle: the picked option is filled in blue; the outline stays dark */
.ns-cadence-option.is-active {
  background: #5478ea;
  color: #ffffff;
}

/* Topics: no focus box after a mouse click or tap; keyboard users still get a clear outline */
.ns-topics-link:focus:not(:focus-visible) {
  outline: none;
}

.ns-topics-link:focus-visible {
  outline: 2px solid #5478ea;
  outline-offset: 4px;
}

/* ---------- Blue offset frames: one size everywhere ----------
   Matches the frame behind the featured post on the homepage (theme's .slide-item-content::before):
   a 4px blue line that peeks out 15px to the left and 15px below the white card. */
.ns-article-end-frame,
#main.ns-about .kg-signup-card {
  position: relative;
  isolation: isolate;
  border: 0;
}

.ns-article-end-frame::before,
#main.ns-about .kg-signup-card::before,
.ns-tier:first-child::before {
  content: "";
  position: absolute;
  inset: auto;
  top: 20px;
  left: -15px;
  right: 20px;
  bottom: -15px;
  border: 4px solid var(--ghost-accent-color, #5478ea);
  transform: none;
  z-index: -1;
  pointer-events: none;
}

.ns-tier {
  isolation: isolate;
}

.ns-article-end-card,
#main.ns-about .kg-signup-card-content {
  transform: none;
}

.ns-article-end,
.ns-paywall {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

#main.ns-about .kg-signup-card {
  margin: 3rem 0 3rem 15px;
}

/* ---------- Issue list on phones and small tablets (homepage "Recent issues" and topic pages) ----------
   Image across the top as a wide strip, with the white title box overlapping its bottom edge, centred. */
@media (max-width: 767px) {
  .post-feed {
    padding: 0 1.25rem !important;
  }

  .post-feed .grid-item {
    margin-bottom: 2.25rem;
  }

  .post-feed .card {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
  }

  .post-feed .card-image,
  .post-feed .card-image:not(.is-square) {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding-top: 0;
    aspect-ratio: 2 / 1;
    max-height: 14rem; /* wider phones and small tablets: keep the strip from getting too tall */
    overflow: hidden;
  }

  .post-feed .card-image img {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .post-feed .post-card-body {
    box-sizing: border-box;
    width: calc(100% - 2rem);
    margin: -2.5rem auto 0;
    padding: 1.25rem 1.25rem 1.375rem;
  }

  .post-feed .post-card-body::before {
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
  }

  .post-feed .post-card-meta {
    margin-bottom: 0.5rem;
  }

  .post-feed .post-card-title {
    font-size: 1.1875rem;
    line-height: 1.3;
  }

  .post-feed .post-card-text {
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    line-height: 1.55;
  }
}

/* "For supporters" tag on paywalled issues (issue list and featured post), right after the date */
.ns-access-tag {
  display: inline-block;
  margin-left: 0.75rem;
  padding: 1px 6px;
  border: 2px solid #5478ea;
  color: #5478ea;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ---------- Sign-up boxes: one size and style everywhere ----------
   End of article, paywall, homepage closing box and the About page's Signup card all share
   the same width, padding, heading and text sizes, and form. */
.ns-article-end,
.ns-paywall,
.ns-closing {
  box-sizing: border-box;
  max-width: 42.5rem; /* 40rem box + side padding */
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

#main.ns-about .kg-signup-card,
#main.ns-about .kg-signup-card.kg-width-wide,
#main.ns-about .kg-signup-card.kg-width-full {
  box-sizing: border-box;
  width: auto !important;
  max-width: 40rem !important;
  margin: 3rem auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.ns-article-end-card,
.ns-paywall-card,
.ns-closing-card,
#main.ns-about .kg-signup-card-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2.25rem 2rem !important;
  border: 2px solid var(--color-border-primary);
  background: var(--color-bg-primary);
  text-align: center !important;
}

#main.ns-about .kg-signup-card-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.ns-article-end-title,
.ns-paywall-title,
.ns-closing-title,
#main.ns-about .kg-signup-card-heading {
  margin: 0 !important;
  font-size: 1.75rem !important;
  font-weight: 700;
  line-height: 1.2 !important;
  text-wrap: balance;
}

.ns-article-end-text,
.ns-paywall-card .ns-paywall-text,
.ns-closing-text,
#main.ns-about .kg-signup-card-subheading {
  margin: 0 !important;
  max-width: 32rem;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--color-gray-700) !important;
  text-wrap: balance;
}

.ns-article-end-card .ns-form,
.ns-closing-card .ns-form,
#main.ns-about .kg-signup-card-form {
  width: 100%;
  max-width: 30rem !important;
  margin: 0.875rem auto 0 !important;
}

.ns-article-end-card .ns-form-row,
.ns-closing-card .ns-form-row,
#main.ns-about .kg-signup-card-fields {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0.5rem;
}

.ns-article-end-card .ns-form-input,
.ns-closing-card .ns-form-input,
#main.ns-about .kg-signup-card-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 3.25rem !important;
  box-sizing: border-box;
  padding: 0 1rem !important;
  border: 2px solid var(--color-border-primary) !important;
  font-size: 1rem !important;
}

.ns-article-end-card .ns-form-button,
.ns-closing-card .ns-form-button,
#main.ns-about .kg-signup-card-button,
.ns-paywall-button,
.ns-article-end-button {
  flex: 0 0 auto;
  height: 3.25rem !important;
  min-height: 3.25rem;
  box-sizing: border-box;
  padding: 0 1.375rem !important;
  border: 0;
  background: #5478ea !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.ns-paywall-button,
.ns-article-end-button {
  margin-top: 0.875rem !important;
}

@media (max-width: 639px) {
  .ns-article-end-card,
  .ns-paywall-card,
  .ns-closing-card,
  #main.ns-about .kg-signup-card-content {
    padding: 1.75rem 1.375rem !important;
  }

  .ns-article-end-title,
  .ns-paywall-title,
  .ns-closing-title,
  #main.ns-about .kg-signup-card-heading {
    font-size: 1.5rem !important;
  }

  .ns-article-end-card .ns-form-row,
  .ns-closing-card .ns-form-row,
  #main.ns-about .kg-signup-card-fields {
    flex-direction: column;
  }

  .ns-article-end-card .ns-form-input,
  .ns-article-end-card .ns-form-button,
  .ns-closing-card .ns-form-input,
  .ns-closing-card .ns-form-button,
  #main.ns-about .kg-signup-card-input,
  #main.ns-about .kg-signup-card-button {
    width: 100%;
    flex-basis: auto;
  }

  /* About page: room on the left for the blue frame */
  #main.ns-about .kg-signup-card,
  #main.ns-about .kg-signup-card.kg-width-wide,
  #main.ns-about .kg-signup-card.kg-width-full {
    margin-left: 15px !important;
    margin-right: 0 !important;
  }
}

/* About page Signup card: put its short text between the heading and the form, like the other sign-up boxes.
   Ghost puts the card's small print (disclaimer) under the form; if there's no subheading, that line moves up
   and is styled as the subheading. If both exist, the small print is hidden so all boxes match. */
#main.ns-about .kg-signup-card-heading { order: 1; }
#main.ns-about .kg-signup-card-subheading,
#main.ns-about .kg-signup-card-disclaimer { order: 2; }
#main.ns-about .kg-signup-card-form { order: 3; }

#main.ns-about .kg-signup-card-disclaimer {
  margin: 0 !important;
  max-width: 32rem;
  font-family: var(--font-sans) !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  color: var(--color-gray-700) !important;
  text-wrap: balance;
}

#main.ns-about .kg-signup-card-subheading ~ .kg-signup-card-disclaimer {
  display: none;
}

/* Email fields: a lighter 1px outline (the boxes around them keep their 2px border) */
.ns-form-input,
.ns-article-end-card .ns-form-input,
.ns-closing-card .ns-form-input,
.ns-paywall-free .ns-form-input,
#main.ns-about .kg-signup-card-input {
  border: 1px solid var(--color-border-primary) !important;
}

/* except the pop-up, where the field sits on red */
.ns-popup .ns-form-input {
  border: 0 !important;
}

/* ---------- Type scale: the same heading sizes on every Not-Ship page ----------
                         desktop   phone (under 640px)
   Page headlines          40px      28px   (homepage, featured issue, Support, About, topic pages)
   Article titles          40px      32px
   Section headings        28px      24px   (Start here, Recent issues, sign-up boxes, Questions, Keep exploring, About sections)
   Small headings          20px      18px   (About boxes, Support options, paywall free line, FAQ questions)
   Issue titles in lists   22px      19px */
.ns-support-title,
.ns-about-title,
.archive-title,
.slide-item-title,
.post-title,
.post-header.is-horizontal .post-title,
.post-header.is-vertical .post-title {
  font-size: 2.5rem;
  line-height: 1.12;
}

.ns-start-title,
.ns-section-title,
.more-posts-title,
.ns-support-body h2,
#main.ns-about .ns-about-body > h2,
.ns-about-person-text h2 {
  font-size: 1.75rem !important;
  line-height: 1.2;
}

.ns-about-box-title,
.ns-support-option-title,
.ns-paywall-free-title,
.ns-support-body h3 {
  font-size: 1.25rem !important;
  line-height: 1.3;
}

.post-feed .post-card-title,
.more-posts .post-card-title {
  font-size: 1.375rem;
}

@media (max-width: 639px) {
  .ns-support-title,
  .ns-about-title,
  .archive-title,
  .slide-item-title {
    font-size: 1.75rem;
  }

  .post-title,
  .post-header.is-horizontal .post-title,
  .post-header.is-vertical .post-title {
    font-size: 2rem;
  }

  .ns-start-title,
  .ns-section-title,
  .more-posts-title,
  .ns-support-body h2,
  #main.ns-about .ns-about-body > h2,
  .ns-about-person-text h2 {
    font-size: 1.5rem !important;
  }

  .ns-about-box-title,
  .ns-support-option-title,
  .ns-paywall-free-title,
  .ns-support-body h3 {
    font-size: 1.125rem !important;
  }

  .post-feed .post-card-title,
  .more-posts .post-card-title {
    font-size: 1.1875rem;
  }
}

/* About page: the support box sits after the page content, with the same space above it as on articles */
.ns-about-support {
  margin-top: 4rem;
}

/* ---------- Reading width ----------
   Article and About text sits in a 660px column (about 77 characters per line).
   Images, charts, embeds and other cards keep the full 768px width, so visuals stand out. */
@media (min-width: 700px) {
  .post-template .post-body > :not(figure):not(.kg-card):not(.ns-about-person),
  #main.ns-about .ns-about-body > :not(figure):not(.kg-card):not(.ns-about-person) {
    max-width: 660px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Support page free line: a small blue label (like the tier names) instead of thin rules */
.ns-support-free-line {
  border: 0 !important;
  padding: 0 !important;
}

.ns-support-free-label {
  display: block;
  margin-bottom: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ghost-accent-color, #5478ea);
}

/* Support page gift section: more space above, bold 20px heading, small outlined button */
.ns-support-options {
  padding-top: 4.5rem !important;
}

.ns-support-options .ns-support-option-title {
  font-size: 1.25rem !important;
}

.ns-support-options .ns-support-option-text {
  font-size: 1rem;
  color: var(--color-gray-700);
}

.ns-support-option-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-top: 0.75rem !important;
  padding: 0 1.25rem;
  border: 2px solid var(--ghost-accent-color, #5478ea);
  background: var(--color-bg-primary);
}

/* Support page toggle: lighter 1px outline, like the email fields */
.ns-cadence {
  border-width: 1px;
}

/* Support page: "Not ready to pay?" as a bold heading, the same style as "Know a numbers person?" */
.ns-support-free-label {
  font-family: var(--font-sans) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-heading-primary) !important;
  margin-bottom: 0.25rem !important;
}

@media (max-width: 639px) {
  .ns-support-free-label {
    font-size: 1.125rem !important;
  }
}

/* Article pages: centre the date, title and author in the headline box */
.post-template .post-header-content {
  text-align: center;
}

.post-template .post-header-content .post-meta,
.post-template .post-header-content .post-meta * {
  justify-content: center;
}

/* Pop-up: button text in the same bright red as the box; more room inside the white line */
.ns-popup {
  --ns-popup-btn-fg: var(--ns-popup-red);
  padding: 2.125rem 2.25rem 2.25rem;
}

.ns-popup-close {
  top: 0.875rem;
  right: 0.875rem;
}

@media (max-width: 500px) {
  .ns-popup {
    padding: 1.75rem 1.625rem 1.875rem;
  }
}

/* Pop-up subtext: break naturally ("Get the data that matters, / each week.") instead of balancing the two lines */
.ns-popup-text {
  text-wrap: wrap;
}

/* About page promises: no grey lines, just space between each one */
.ns-about-body ul.ns-about-promises {
  border: 0;
}

.ns-about-body ul.ns-about-promises li {
  margin: 1.75rem 0 0;
  padding: 0;
  border: 0;
}

/* ---------- Section labels and lighter titles (homepage and article pages) ----------
   "New here? Start with these.", "Recent issues" and "Keep exploring" are small mono labels,
   so the issue titles and the featured headline lead. Issue titles are semibold rather than bold. */
.ns-section-heading {
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ns-start-title,
.ns-section-title,
.ns-section-heading .ns-section-title {
  margin: 0 0 1.25rem !important;
  font-family: var(--font-mono) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: var(--color-heading-primary);
}

.ns-section-heading .ns-section-title + .ns-topics {
  margin-top: -0.5rem;
}

.ns-start-card-title,
.post-feed .post-card-title {
  font-weight: 600 !important;
}

/* More room between the featured issue and "Start here" */
.ns-start {
  margin-top: 4.5rem;
}

/* Keep exploring, at the end of articles */
.ns-more {
  margin: 4.5rem 0 1.5rem;
}

@media (max-width: 767px) {
  .ns-section-heading {
    padding: 0 1.25rem;
  }
}

@media (max-width: 639px) {
  .ns-start {
    margin-top: 3.5rem;
  }

  .ns-start-title,
  .ns-section-title,
  .ns-section-heading .ns-section-title {
    font-size: 0.8125rem !important;
  }
}