/* ==========================================================================
   FULLSTACK — Insights index, category archives and articles
   ========================================================================== */

/* ==========================================================================
   01. HERO
   ========================================================================== */

/* Measured: "and operating." is the widest line at 8.37em, so the cap is
   100/8.37 ≈ 11.9cqw. 11.5cqw leaves margin. */
.fs-hero--insights .fs-hero__title { font-size: min(var(--fs-text-d1), 11.5cqw); }

.fs-loop-diagram { display: flex; flex-direction: column; width: 100%; }

.fs-loop-diagram__step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-4);
  padding: var(--fs-space-4) var(--fs-space-5);
  border: var(--fs-border-width) solid var(--fs-dark-border);
}

.fs-loop-diagram__step + .fs-loop-diagram__step { margin-top: 1.75rem; }

.fs-loop-diagram__step + .fs-loop-diagram__step::before {
  content: '↓';
  position: absolute;
  top: -0.875rem;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.875rem;
  line-height: 1;
  color: var(--fs-text-on-dark-muted);
}

.fs-loop-diagram__label {
  font-size: 0.8125rem;
  font-weight: var(--fs-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fs-text-on-dark);
}

.fs-loop-diagram__note {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fs-text-on-dark-muted);
}

.fs-loop-diagram__step--accent {
  background-color: var(--fs-dark-bg-raised);
  border-color: var(--fs-border-strong);
}

/* ==========================================================================
   02. FEATURED ARTICLE
   ========================================================================== */

.fs-featured__layout { margin-top: var(--fs-section-gap); }

.fs-featured__layout--media {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 3.75rem);
  align-items: center;
}

.fs-featured__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-4);
  letter-spacing: 0.12em;
  color: var(--fs-fg-muted);
}

.fs-featured__category { color: var(--fs-accent-text); }

.fs-featured__title {
  margin-top: var(--fs-space-5);
  text-transform: uppercase;
}

.fs-featured__title a { color: inherit; }
.fs-featured__title a:hover { color: var(--fs-accent-text); }

.fs-featured__text { margin-top: var(--fs-space-5); }
.fs-featured__cta { margin-top: var(--fs-space-8); }

.fs-featured__image { width: 100%; height: auto; }

@media (max-width: 1023px) {
  .fs-featured__layout--media { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   03. CATEGORY NAVIGATION
   ========================================================================== */

.fs-latest__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fs-space-6);
}

.fs-category-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
}

.fs-category-nav__link {
  display: inline-block;
  padding: 0.4375rem 0.875rem;
  border: var(--fs-border-width) solid var(--fs-border-strong);
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fs-fg-muted);
  transition:
    background-color var(--fs-duration-fast) var(--fs-ease),
    border-color var(--fs-duration-fast) var(--fs-ease),
    color var(--fs-duration-fast) var(--fs-ease);
}

.fs-category-nav__link:hover,
.fs-category-nav__link:focus-visible {
  border-color: var(--fs-fg);
  color: var(--fs-fg);
}

.fs-category-nav__link.is-current {
  background-color: var(--fs-graphite);
  border-color: var(--fs-graphite);
  color: var(--fs-warm-white);
}

/* ==========================================================================
   04. ARTICLE LIST
   ========================================================================== */

.fs-latest__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--fs-grid-gap);
  margin-top: var(--fs-section-gap);
}

.fs-latest__empty { margin-top: var(--fs-section-gap); }
.fs-latest__empty-cta { margin-top: var(--fs-space-6); }

/* The card variant of the shared article component. */
.fs-article-row--card {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6);
  background-color: var(--fs-bg);
  border: var(--fs-border-width) solid var(--fs-border);
  transition: transform var(--fs-duration) var(--fs-ease),
    border-color var(--fs-duration) var(--fs-ease);
}

.fs-article-row--card:hover,
.fs-article-row--card:focus-within {
  transform: translateY(-4px);
  border-color: var(--fs-graphite);
}

.fs-article-row--card .fs-article-row__title { font-size: var(--fs-text-h3); }
.fs-article-row--card .fs-article-row__meta { justify-content: flex-start; margin-top: auto; }
.fs-article-row--card .fs-article-row__main { order: 0; }

.fs-article-row__visual { overflow: hidden; margin: calc(var(--fs-space-6) * -1) calc(var(--fs-space-6) * -1) 0; }
.fs-article-row__image { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

@media (max-width: 1023px) {
  .fs-latest__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .fs-latest__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   05. OPERATOR NOTES & FRAMEWORKS
   ========================================================================== */

.fs-notes { overflow: hidden; }
.fs-notes__split { margin-top: var(--fs-space-6); }
.fs-notes__title { text-transform: uppercase; }
.fs-notes__text { margin-top: var(--fs-space-5); }
.fs-notes__cta { margin-top: var(--fs-space-8); }

.fs-notes__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--fs-section-gap);
  background-color: var(--fs-divider);
  border: var(--fs-border-width) solid var(--fs-divider);
}

.fs-note {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  padding: var(--fs-space-6) var(--fs-space-5);
  background-color: var(--fs-bg);
}

.fs-note__category { letter-spacing: 0.14em; color: var(--fs-fg-muted); }

.fs-note__title {
  font-size: 0.9375rem;
  font-weight: var(--fs-weight-extrabold);
  line-height: 1.4;
}

.fs-frameworks__grid { margin-top: var(--fs-section-gap); }

.fs-framework { gap: var(--fs-space-3); background-color: transparent; }
.fs-framework__category { letter-spacing: 0.14em; color: var(--fs-fg-muted); }

.fs-framework__title {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: var(--fs-tracking-tight);
}

.fs-framework__text { font-size: 0.90625rem; line-height: 1.6; color: var(--fs-fg-body); }
.fs-framework__cta { margin-top: auto; padding-top: var(--fs-space-5); pointer-events: none; }

@media (max-width: 1023px) {
  .fs-notes__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .fs-notes__list { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   06. AUDIENCES
   ========================================================================== */

.fs-audiences__grid { margin-top: var(--fs-section-gap); }

.fs-audience { gap: var(--fs-space-4); background-color: transparent; }

.fs-audience__title {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fs-audience__topics {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2.1;
  color: var(--fs-fg-muted);
}

.fs-audience__cta { margin-top: auto; padding-top: var(--fs-space-5); }

/* ==========================================================================
   07. NEWSLETTER
   ========================================================================== */

.fs-newsletter__inner { align-items: center; }
.fs-newsletter__title { margin-top: var(--fs-space-6); text-transform: uppercase; }
.fs-newsletter__text { margin-top: var(--fs-space-6); }

.fs-newsletter__form,
.fs-newsletter__pending {
  padding: clamp(1.5rem, 0.8rem + 2.4vw, 2.5rem);
  background-color: var(--fs-dark-bg-raised);
  border: var(--fs-border-width) solid var(--fs-border);
}

.fs-newsletter__form-title { letter-spacing: var(--fs-tracking-mono); color: var(--fs-fg-muted); }

.fs-newsletter__form .fs-field { margin-top: var(--fs-space-5); }
.fs-newsletter__form .fs-btn { margin-top: var(--fs-space-5); }

.fs-newsletter__note {
  margin-top: var(--fs-space-4);
  letter-spacing: 0.08em;
  color: var(--fs-fg-faint);
}

.fs-newsletter__pending-text {
  margin: var(--fs-space-5) 0 var(--fs-space-6);
  font-size: var(--fs-text-body);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

/* ==========================================================================
   08. ARTICLE
   ========================================================================== */

.fs-article-hero__inner { max-width: calc(52rem + var(--fs-gutter) * 2); }

.fs-article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fs-space-4);
  letter-spacing: 0.12em;
  color: var(--fs-fg-muted);
}

.fs-article-hero__category { color: var(--fs-accent); }
.fs-article-hero__category:hover { color: var(--fs-accent-bright); }

.fs-article-hero__title {
  margin-top: var(--fs-space-6);
  font-size: var(--fs-text-d3);
  font-weight: var(--fs-weight-black);
  line-height: var(--fs-leading-heading);
  letter-spacing: var(--fs-tracking-heading);
  text-transform: uppercase;
  text-wrap: balance;
}

.fs-article-hero__deck {
  margin-top: var(--fs-space-6);
  max-width: 44rem;
  font-size: var(--fs-text-lead);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
}

.fs-article-hero__byline {
  margin-top: var(--fs-space-8);
  letter-spacing: 0.14em;
  color: var(--fs-fg-faint);
}

.fs-article__hero-media {
  margin: 0;
  background-color: var(--fs-dark-bg-raised);
}

.fs-article__hero-image { width: 100%; height: auto; }

/* --- Body: reading column + contents ------------------------------------- */

.fs-article__layout { max-width: calc(47.5rem + var(--fs-gutter) * 2); }

/* The reading measure is ~760px; with a contents rail the container widens so
   the measure itself does not change. */
.fs-article__layout--toc {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 47.5rem);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
  max-width: calc(64rem + var(--fs-gutter) * 2);
}

.fs-article__content { max-width: 47.5rem; }

.fs-toc {
  position: sticky;
  top: calc(var(--fs-header-height) + 2rem);
  border-left: var(--fs-border-width) solid var(--fs-border);
  padding-left: var(--fs-space-5);
}

.fs-toc__summary {
  letter-spacing: var(--fs-tracking-mono);
  color: var(--fs-fg-muted);
  cursor: pointer;
}

/* The marker is redundant on desktop where the list is always open. */
.fs-toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--fs-space-3);
  margin-top: var(--fs-space-4);
  font-size: 0.84375rem;
  line-height: 1.4;
  color: var(--fs-fg-muted);
}

.fs-toc__item--h3 { padding-left: var(--fs-space-4); }
.fs-toc__list a:hover { color: var(--fs-fg); }

@media (max-width: 1023px) {
  .fs-article__layout--toc { grid-template-columns: minmax(0, 1fr); }
  .fs-toc {
    position: static;
    border-left: 0;
    padding: var(--fs-space-5);
    border: var(--fs-border-width) solid var(--fs-border);
    margin-bottom: var(--fs-section-gap);
  }
}

/* ==========================================================================
   09. EDITORIAL CALLOUTS
   Core group blocks carrying a block style. Server-rendered, no custom block.
   ========================================================================== */

.fs-content .is-style-principle,
.fs-content .is-style-field-note,
.fs-content .is-style-framework,
.fs-content .is-style-example,
.fs-content .is-style-watch-out,
.fs-content .is-style-key-takeaway {
  margin-block: var(--fs-space-10);
  padding: var(--fs-space-6) var(--fs-space-8);
  border: var(--fs-border-width) solid var(--fs-border);
}

.fs-content .fs-callout__label {
  font-family: var(--fs-font-mono);
  font-size: var(--fs-text-mono);
  font-weight: var(--fs-weight-semibold);
  letter-spacing: var(--fs-tracking-mono);
  text-transform: uppercase;
  color: var(--fs-fg-muted);
}

.fs-content .fs-callout__label + p { margin-top: var(--fs-space-4); }

/* Principle — a statement, set larger. */
.fs-content .is-style-principle {
  border-left: var(--fs-border-emphasis) solid var(--fs-graphite);
}

.fs-content .is-style-principle p:not(.fs-callout__label) {
  font-size: var(--fs-text-h3);
  font-weight: var(--fs-weight-extrabold);
  line-height: 1.3;
  letter-spacing: var(--fs-tracking-tight);
  color: var(--fs-fg);
}

/* Field note — from operating our own products, so it takes the dark ground. */
.fs-content .is-style-field-note {
  background-color: var(--fs-graphite);
  border-color: var(--fs-graphite);
  color: var(--fs-warm-white);
}

.fs-content .is-style-field-note .fs-callout__label { color: var(--fs-accent); }
.fs-content .is-style-field-note p { color: var(--fs-text-on-dark-3); }

/* Framework — a sequence, set in mono. */
.fs-content .is-style-framework {
  background-color: var(--fs-light-bg-alt);
}

.fs-content .is-style-framework p:not(.fs-callout__label) {
  font-family: var(--fs-font-mono);
  font-size: 0.84375rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--fs-fg);
}

/* Example — quieter, indented. */
.fs-content .is-style-example {
  border-left: var(--fs-border-emphasis) solid var(--fs-border-strong);
  background-color: transparent;
}

/* Watch out — caution, without shouting. */
.fs-content .is-style-watch-out {
  border-left: var(--fs-border-emphasis) solid var(--fs-status-caution);
}

.fs-content .is-style-watch-out .fs-callout__label { color: var(--fs-status-caution); }

/* Key takeaway — the one lime moment in the article body. */
.fs-content .is-style-key-takeaway {
  border-left: var(--fs-border-emphasis) solid var(--fs-accent);
  background-color: var(--fs-light-bg-alt);
}

.fs-content .is-style-key-takeaway p:not(.fs-callout__label) {
  font-size: var(--fs-text-h4);
  font-weight: var(--fs-weight-extrabold);
  line-height: 1.4;
  color: var(--fs-fg);
}

/* ==========================================================================
   10. ARTICLE CTA + RELATED
   ========================================================================== */

.fs-article-cta__inner { max-width: calc(47.5rem + var(--fs-gutter) * 2); }

.fs-article-cta__title {
  font-size: var(--fs-text-h2-sm);
  font-weight: var(--fs-weight-black);
  letter-spacing: var(--fs-tracking-heading);
  text-transform: uppercase;
}

.fs-article-cta__text {
  margin: var(--fs-space-4) 0 var(--fs-space-8);
  font-size: var(--fs-text-lead);
  line-height: var(--fs-leading-body);
  color: var(--fs-fg-body);
  max-width: 36rem;
}

.fs-related-insights__title { text-transform: uppercase; }
.fs-related-insights__grid { margin-top: var(--fs-section-gap); }

/* ==========================================================================
   11. CATEGORY ARCHIVE
   ========================================================================== */

.fs-archive-hero__title {
  margin-top: var(--fs-space-6);
  font-size: var(--fs-text-d2);
  font-weight: var(--fs-weight-black);
  line-height: var(--fs-leading-display);
  letter-spacing: var(--fs-tracking-display);
  text-transform: uppercase;
}

.fs-archive-hero__text { margin-top: var(--fs-space-6); }