/* Sizes are px, not rem, and that is deliberate.

   The Source theme this builds on sets a 10px root font-size, so every rem
   here rendered at 62% of its intended size — a 2.2rem heading came out at
   22px instead of 35. The masthead looked broken on deploy for exactly that
   reason, which is the likeliest explanation for why this stylesheet sat
   unshipped. Converted 27 Aug 2026 against the 16px base it was written for.

   Same trap as the SUBSCRIPT/ION bug in core/images.py. If you add a rule
   here, use px or em — never rem. */
/* SecureNest additions to the `source` theme.
 *
 * Kept in a separate file rather than appended to assets/built/screen.css so
 * that pulling an updated upstream theme overwrites only the vendored build
 * output and leaves these styles alone. The single-line <link> in default.hbs
 * is the whole footprint.
 *
 * Colours come from --ghost-accent-color and the theme's own tokens wherever
 * possible, so changing the accent in Ghost admin still changes everything.
 */

.sn-topics {
  padding: 0 0 4vmin;
}

.sn-topics-inner {
  border-top: 1px solid var(--color-lighter-gray, #e5e5e5);
  padding-top: 4vmin;
}

.sn-topics-title {
  font-size: 35.2px;
  margin: 0 0 35.2px;
}

.sn-topics-grid {
  display: grid;
  /* auto-fit rather than a fixed column count: with two topics the grid should
     not leave four empty cells, and with seven it should not force a scroll. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--color-lighter-gray, #e5e5e5);
  border: 1px solid var(--color-lighter-gray, #e5e5e5);
}

.sn-topic {
  display: flex;
  flex-direction: column;
  gap: 8.8px;
  padding: 28.8px 30.4px 25.6px;
  background: var(--background-color, #fff);
  text-decoration: none;
  color: inherit;
  transition: background 0.15s ease;
}

.sn-topic:hover,
.sn-topic:focus-visible {
  background: color-mix(in srgb, var(--ghost-accent-color) 7%, transparent);
}

.sn-topic:focus-visible {
  outline: 2px solid var(--ghost-accent-color);
  outline-offset: -2px;
}

.sn-topic-name {
  font-size: 23.2px;
  font-weight: 700;
  line-height: 1.2;
}

.sn-topic-desc {
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.7;
  /* Descriptions are written to a similar length, but a long one must not
     stretch one cell taller than its neighbours. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sn-topic-count {
  margin-top: auto;
  padding-top: 6.4px;
  font-size: 12.8px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ghost-accent-color);
}

@media (max-width: 640px) {
  .sn-topics-grid { grid-template-columns: 1fr; }
  .sn-topic { padding: 20px 20.8px; }
}

/* Ghost renders the tag description on its own archive page but the theme
   gives it no room; without this the topic pages open on a bare list. */
.tag-template .gh-header-description,
.author-template .gh-header-description {
  max-width: 46ch;
  margin-inline: auto;
}

/* A pillar with nothing in it yet. Visibly a plan rather than a destination:
   no link, no count, and enough contrast lost that it never competes with the
   topics that do have something to read. */
.sn-topic.is-empty {
  cursor: default;
  opacity: 0.55;
}
.sn-topic.is-empty:hover { background: var(--background-color, #fff); }
.sn-topic-count.is-soon {
  color: inherit;
  opacity: 0.7;
  font-weight: 600;
}

/* ---------------------------------------------------------------- post ---
   Breadcrumbs, the maintenance date, and the sticky contents bar. */

.sn-crumbs {
  font-family: var(--sn-ui, system-ui, sans-serif);
  font-size: 13.6px;
  letter-spacing: 0.02em;
  margin-bottom: 17.6px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  opacity: 0.8;
}
.sn-crumbs a { color: inherit; text-decoration: none; }
.sn-crumbs a:hover { text-decoration: underline; }
.sn-crumbs span { opacity: 0.5; }

/* The site promises maintained pages. Publish date alone does not show that,
   so this states when the sources were last read — the trust signal that
   matters most in a niche where prices and policies move. */
.sn-checked {
  display: flex;
  align-items: center;
  gap: 8.8px;
  flex-wrap: wrap;
  font-family: var(--sn-ui, system-ui, sans-serif);
  font-size: 14.4px;
  opacity: 0.8;
  margin: 22.4px 0 0;
  padding-top: 17.6px;
  border-top: 1px solid var(--color-lighter-gray, #e5e5e5);
}
.sn-checked-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ghost-accent-color);
  flex: none;
}

.sn-contents {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--background-color, #fff);
  border-bottom: 1px solid var(--color-lighter-gray, #e5e5e5);
  padding: 11.2px 0;
  margin-bottom: 32px;
}
.sn-contents-label {
  font-family: var(--sn-ui, system-ui, sans-serif);
  font-size: 11.2px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.55;
  margin: 0 0 6.4px;
}
.sn-contents-list {
  list-style: none;
  margin: 0;
  padding: 0 0 2.4px;
  display: flex;
  gap: 22.4px;
  /* Horizontal and scrollable rather than wrapping: the bar has to stay one
     line tall at every width, or a sticky element eats the screen on mobile. */
  overflow-x: auto;
  scrollbar-width: none;
}
.sn-contents-list::-webkit-scrollbar { display: none; }
.sn-contents-list li { margin: 0; flex: none; }
.sn-contents-list a {
  font-family: var(--sn-ui, system-ui, sans-serif);
  font-size: 14.1px;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
  opacity: 0.65;
  padding-bottom: 4.8px;
  border-bottom: 2px solid transparent;
  display: block;
}
.sn-contents-list a:hover { opacity: 1; }
.sn-contents-list a.is-active {
  opacity: 1;
  font-weight: 600;
  border-bottom-color: var(--ghost-accent-color);
}

/* Anchor targets must clear the sticky bar, or clicking a contents link puts
   the heading underneath it. */
.gh-content h2 { scroll-margin-top: 80px; }

@media (max-width: 640px) {
  .sn-contents { padding: 8.8px 0; }
  .sn-contents-list { gap: 17.6px; }
}

/* ------------------------------------------------------------ a11y/mobile */

/* Nav items measured under the 44px touch minimum. Padding rather than a
   height so the text stays optically where it was. */
.gh-head-menu a,
.gh-navigation a {
  padding-block: 11.2px;
}

/* Ghost's Portal injects a "Sign up" control even with member signup off, so
   it renders a live button that does nothing. Hidden until SMTP exists. */
.gh-foot-menu a[href*="portal"],
[data-portal="signup"] { display: none !important; }

/* ------------------------------------------------------ homepage masthead */
/* The masthead sits between <header> and .gh-header, outside the grid that
   gives .gh-outer > .gh-inner its side margins — so it has to carry its own.
   Deployed without this it rendered flush at left: 0 while every other row on
   the page started at 30px. Matched to Source's 1320px container. */
.sn-masthead { padding: 3.4vmin max(4vmin, 20px) 0; }
.sn-masthead-inner {
  max-width: 1320px;
  margin-inline: auto;
  border-bottom: 1px solid var(--color-lighter-gray, #e5e5e5);
  padding-bottom: 2.6vmin;
}
.sn-masthead-title {
  font-size: clamp(30.4px, 4vw, 43.2px);
  line-height: 1.1;
  margin: 0 0 8.8px;
  letter-spacing: -0.02em;
}
.sn-masthead-line {
  font-size: 18.4px;
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
  opacity: 0.85;
}
.sn-masthead-method {
  display: block;
  margin-top: 8px;
  font-size: 15.2px;
  opacity: 0.65;
}