/* =====================================================
   NovaLuxe CDA Homes — blog-post.css
   -----------------------------------------------------
   Editorial template for a single journal article.
   Load order: tailwind → global → navbar → this → footer

   The hero is the shared HeroSection component. The only thing styled here is
   the width of its text column, so this article's long headline sets on two
   lines instead of three.

   Sections:
   1.  Tokens + reveal gate
   2.  Reading progress bar
   4.  Shell / grid
   5.  Sidebar (back, contents, share)
   6.  Body typography
   7.  Lead + section headers
   8.  Callouts + pull quotes
   9.  Figures
   10. Stage timeline
   13. FAQ accordion
   14. Project spotlight
   16. Responsive
   ===================================================== */


/* ─────────────────────────────────────────────
   1. TOKENS + REVEAL GATE
   ───────────────────────────────────────────── */
/* The shared hero caps its text column at max-w-3xl, which breaks this article's
   headline over three lines. Widening it here only — every other hero keeps the
   default — lets it set on two. */
@media (min-width: 769px) {
  #article-hero .max-w-3xl { max-width: 58rem; }
}

/* global.css sets `overflow-x: hidden` on body, which turns body into a scroll
   container and stops `position: sticky` from ever engaging. `clip` hides the
   same overflow without creating one, so the sidebar can stick. */
body[data-page="blog-post"] {
  overflow-x: clip;

  --art-panel:   #0b0b0b;
  --art-panel-2: #101010;
  --art-line:    rgba(255, 255, 255, .10);
  --art-line-2:  rgba(200, 164, 91, .28);
  --art-text:    rgba(255, 255, 255, .74);
  --art-dim:     rgba(255, 255, 255, .48);

  /* Layout — the rail and the article column are both fixed widths, centred as
     a pair. The article column is exactly --art-measure, so everything inside it
     (text, stage photos, card grids) is bounded by the same edge. */
  --art-shell:   1280px;
  --art-side:    260px;
  --art-measure: 780px;
  --art-col-gap: clamp(2.5rem, 4vw, 5rem);

  --art-gap:     clamp(2.25rem, 5vw, 3.75rem);
}

/* Wider screens get a broader rail and a longer measure, which widens the
   centred pair and so pulls the rail further left */
@media (min-width: 1440px) {
  body[data-page="blog-post"] {
    --art-shell:   1440px;
    --art-side:    280px;
    --art-measure: 840px;
  }
}
@media (min-width: 1700px) {
  body[data-page="blog-post"] {
    --art-shell:   1580px;
    --art-side:    300px;
    --art-measure: 880px;
    --art-col-gap: 5.5rem;
  }
}

/* Anchor targets clear the fixed navbar */
body[data-page="blog-post"] [id] {
  scroll-margin-top: calc(var(--nlx-header-h, 80px) + 1.5rem);
}

/* Reveal only runs when JS is present — content is never hidden otherwise */
html.nlx-js .article-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
html.nlx-js .article-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html.nlx-js .article-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ─────────────────────────────────────────────
   2. READING PROGRESS BAR
   ───────────────────────────────────────────── */
.article-progress {
  position: fixed;
  top: var(--nlx-header-h, 80px);
  left: 0;
  right: 0;
  height: 3px;
  z-index: 40;
  pointer-events: none;
  background: rgba(255, 255, 255, .06);
  opacity: 0;
  transition: opacity .3s ease;
}
.article-progress.is-on { opacity: 1; }

.article-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold2), #fff);
  box-shadow: 0 0 12px rgba(200, 164, 91, .5);
}


/* ─────────────────────────────────────────────
   4. SHELL / GRID
   ───────────────────────────────────────────── */
.article-main {
  background: #000;
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem) clamp(4rem, 8vw, 7rem);
}

.article-shell {
  width: min(var(--art-shell), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--art-side) minmax(0, var(--art-measure));
  gap: var(--art-col-gap);
  justify-content: center;
  align-items: start;
}


/* ─────────────────────────────────────────────
   5. SIDEBAR
   ───────────────────────────────────────────── */
.article-side {
  position: sticky;
  top: calc(var(--nlx-header-h, 80px) + 2.25rem);
  display: grid;
  gap: 2.5rem;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gold2);
  text-decoration: none;
  transition: gap .2s ease, color .2s ease;
}
.article-back svg { flex: none; }
@media (hover: hover) and (pointer: fine) {
  .article-back:hover { color: #fff; gap: .75rem; }
}

/* Contents */
.article-toc__label {
  margin: 0 0 1.1rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--art-line-2);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold2);
}

/* No gap between rows — the left borders join into one continuous rail with the
   current section lit in gold */
.article-toc__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-toc__list a {
  display: block;
  margin-left: -1.1rem;
  padding: .72rem 0 .72rem 1.1rem;
  border-left: 2px solid rgba(255, 255, 255, .08);
  font-size: .95rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .article-toc__list a:hover {
    color: #fff;
    border-left-color: rgba(200, 164, 91, .5);
  }
}
.article-toc__list a.is-current {
  color: #fff;
  border-left-color: var(--gold);
}
/* A touch more room again once the rail itself is wider */
@media (min-width: 1600px) {
  .article-toc__list a {
    padding-top: .8rem;
    padding-bottom: .8rem;
    font-size: 1rem;
  }
}

/* Share */
.article-share__label {
  margin: 0 0 .9rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.article-share__row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}
.article-share__btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--art-line);
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, color .2s ease, background .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .article-share__btn:hover {
    transform: translateY(-2px);
    border-color: var(--art-line-2);
    background: rgba(200, 164, 91, .1);
    color: var(--gold2);
  }
}
.article-share__btn.is-copied {
  border-color: var(--gold);
  color: var(--gold2);
}

/* Mobile contents card — hidden on desktop */
.article-toc-mobile {
  display: none;
  margin-bottom: 2.75rem;
  border: 1px solid var(--art-line);
  border-radius: 16px;
  background: var(--art-panel);
  overflow: hidden;
}
.article-toc-mobile > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
}
.article-toc-mobile > summary::-webkit-details-marker { display: none; }
.article-toc-mobile > summary svg { flex: none; transition: transform .25s ease; }
.article-toc-mobile[open] > summary svg { transform: rotate(180deg); }
.article-toc-mobile .article-toc__list { padding: 0 1.25rem 1.25rem; }


/* ─────────────────────────────────────────────
   6. BODY TYPOGRAPHY
   ───────────────────────────────────────────── */
.article-body {
  min-width: 0;
  color: var(--art-text);
  font-size: 1.0625rem;
  line-height: 1.85;
}


.article-body p { margin: 0 0 1.35rem; }
.article-body p:last-child { margin-bottom: 0; }

.article-body strong { color: #fff; font-weight: 600; }

.article-body a:not([class]) {
  color: var(--gold2);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(200, 164, 91, .45);
  transition: text-decoration-color .2s ease, color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .article-body a:not([class]):hover {
    color: #fff;
    text-decoration-color: #fff;
  }
}

.article-list {
  display: grid;
  gap: .7rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

/* Only for lists of short, one-or-two-word items — anything that wraps looks
   broken across columns. Reads down column one, then down column two. */
.article-list--split {
  display: block;
  columns: 2;
  column-gap: 2.5rem;
}
.article-list--split li {
  break-inside: avoid;
  margin-bottom: .7rem;
}
.article-list--split li:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .article-list--split { columns: 1; }
}
.article-list li {
  position: relative;
  padding-left: 1.6rem;
}
.article-list li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .78em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold), var(--gold2));
}


/* ─────────────────────────────────────────────
   7. SECTION HEADERS
   ───────────────────────────────────────────── */
.article-section { margin-top: var(--art-gap); }

/* The intro is the first section, so it sits flush with the top of the rail */
.article-body > .article-section:first-of-type { margin-top: 0; }

.article-section__num {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 .85rem;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
}
.article-section__num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--art-line-2), transparent);
}

.article-body h2 {
  margin: 0 0 1.35rem;
  font-family: var(--nlx-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: #fff;
  text-wrap: balance;
}

.article-body h3 {
  margin: 2.5rem 0 .9rem;
  font-family: var(--nlx-sans);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.4;
  letter-spacing: .01em;
  color: #fff;
}

.article-eyebrow {
  margin: 0 0 .7rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold2);
}


/* ─────────────────────────────────────────────
   8. CALLOUTS + PULL QUOTES
   ───────────────────────────────────────────── */
.article-callout {
  margin: 2.25rem 0;
  padding: 1.5rem 1.65rem;
  border: 1px solid var(--art-line);
  border-left: 3px solid var(--gold);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(200, 164, 91, .07), rgba(255, 255, 255, .015));
}
.article-callout .article-eyebrow { margin-bottom: .55rem; }
.article-callout p:last-child,
.article-callout .article-list:last-child { margin-bottom: 0; }

.article-quote {
  margin: 2.75rem 0;
  padding: 0 0 0 1.75rem;
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--gold), var(--gold2), rgba(255, 255, 255, .2)) 1;
}
.article-quote p {
  margin: 0;
  font-family: var(--nlx-serif);
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: #fff;
}


/* ─────────────────────────────────────────────
   9. FIGURES
   ───────────────────────────────────────────── */
.article-figure { margin: var(--art-gap) 0; }

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--art-line);
  border-radius: 16px;
}
.article-figure figcaption {
  margin-top: .85rem;
  padding-left: .9rem;
  border-left: 2px solid var(--art-line-2);
  font-size: .82rem;
  line-height: 1.6;
  color: var(--art-dim);
}

/* Construction photos placed within their matching timeline stages */
body[data-page="blog-post"] .article-stage-media {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: .9rem;
  row-gap: 1.25rem;
  margin: 2.25rem 0 .85rem;
}

body[data-page="blog-post"] .article-stage-media__item {
  grid-column: span 6;
  min-width: 0;
  margin: 0;
}

body[data-page="blog-post"] .article-stage-media__item--lead {
  grid-column: 1 / -1;
}

body[data-page="blog-post"] .article-stage-media__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--art-line);
  border-radius: 12px;
  background: var(--art-panel);
}

body[data-page="blog-post"] .article-stage-media__item--lead .article-stage-media__frame,
body[data-page="blog-post"] .article-stage-media--finish .article-stage-media__frame {
  aspect-ratio: 16 / 9;
}

body[data-page="blog-post"] .article-stage-media__item--progress .article-stage-media__frame {
  aspect-ratio: 4 / 5;
}

body[data-page="blog-post"] .article-stage-media--rough-in .article-stage-media__frame {
  aspect-ratio: 3 / 2;
}

body[data-page="blog-post"] .article-stage-media__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
  pointer-events: none;
}

body[data-page="blog-post"] .article-stage-media__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--media-position, 50% 50%);
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

body[data-page="blog-post"] .article-stage-media__item figcaption {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-top: .6rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--art-dim);
}

body[data-page="blog-post"] .article-stage-media__item figcaption::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  flex: none;
  background: var(--gold);
}

@media (hover: hover) and (pointer: fine) {
  body[data-page="blog-post"] .article-stage-media__item:hover .article-stage-media__frame {
    border-color: var(--art-line-2);
  }

  body[data-page="blog-post"] .article-stage-media__item:hover img {
    transform: scale(1.025);
  }
}

@media (max-width: 600px) {
  body[data-page="blog-post"] .article-stage-media {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    margin-top: 1.75rem;
  }

  body[data-page="blog-post"] .article-stage-media__item,
  body[data-page="blog-post"] .article-stage-media__item--lead {
    grid-column: 1;
  }

  body[data-page="blog-post"] .article-stage-media__item--lead .article-stage-media__frame,
  body[data-page="blog-post"] .article-stage-media--finish .article-stage-media__frame {
    aspect-ratio: 16 / 10;
  }

  body[data-page="blog-post"] .article-stage-media--finish .article-stage-media__frame {
    aspect-ratio: 16 / 9;
  }

  body[data-page="blog-post"] .article-stage-media--rough-in .article-stage-media__frame {
    aspect-ratio: 3 / 2;
  }

  body[data-page="blog-post"] .article-stage-media__item--progress .article-stage-media__frame {
    aspect-ratio: 4 / 5;
  }
}


/* ─────────────────────────────────────────────
   10. STAGE TIMELINE
   ───────────────────────────────────────────── */
.article-stages {
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: stage;
}

.article-stages > li {
  position: relative;
  padding: 0 0 2.25rem 3.25rem;
}
.article-stages > li:last-child { padding-bottom: 0; }

/* Connecting rail */
.article-stages > li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 2.15rem;
  bottom: -.35rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(200, 164, 91, .55), rgba(200, 164, 91, .08));
}
.article-stages > li:last-child::before { display: none; }

/* Numbered node */
.article-stages > li::after {
  counter-increment: stage;
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .35rem;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid rgba(200, 164, 91, .45);
  border-radius: 999px;
  background: #0b0b0b;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--gold2);
}

.article-stages h3 {
  margin: 0 0 .55rem;
  font-size: 1.08rem;
}
.article-stages p { margin: 0 0 1rem; }
.article-stages p:last-child { margin-bottom: 0; }


/* ─────────────────────────────────────────────
   13. FAQ ACCORDION
   ───────────────────────────────────────────── */
.article-faq {
  margin-top: var(--art-gap);
  padding-top: var(--art-gap);
  border-top: 1px solid var(--art-line);
}

.article-faq__list {
  margin-top: 2rem;
  border-top: 1px solid rgba(230, 205, 140, .35);
}

.article-faq__item {
  border-bottom: 1px solid rgba(230, 205, 140, .22);
  background: transparent;
  transition: border-color .25s ease, background .25s ease;
}
.article-faq__item[open] {
  border-color: rgba(230, 205, 140, .55);
  background: linear-gradient(90deg, rgba(200, 164, 91, .08), rgba(255, 255, 255, .018), transparent);
}

.article-faq__item > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.15rem;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  user-select: none;
  color: #fff;
}
.article-faq__item > summary::-webkit-details-marker { display: none; }

.article-faq__question {
  font-family: var(--nlx-serif);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
}

.article-faq__toggle {
  position: relative;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid rgba(230, 205, 140, .5);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 18px rgba(200, 164, 91, .08);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.article-faq__toggle::before,
.article-faq__toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: .82rem;
  height: 1px;
  background: #f2de98;
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .25s ease;
}

.article-faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.article-faq__item[open] .article-faq__toggle {
  border-color: rgba(255, 246, 189, .8);
  background: rgba(200, 164, 91, .12);
  transform: rotate(90deg);
}
.article-faq__item[open] .article-faq__toggle::after { opacity: 0; }

.article-faq__item > summary:focus-visible {
  outline: 1px solid rgba(230, 205, 140, .85);
  outline-offset: 8px;
}

.article-faq__body {
  max-width: 44rem;
  padding: 0 3.4rem 1.3rem 0;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--art-text);
}
.article-faq__body p { margin: 0 0 .9rem; }
.article-faq__body p:last-child,
.article-faq__body .article-list:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .article-faq__list { margin-top: 1.5rem; }
  .article-faq__item > summary {
    grid-template-columns: minmax(0, 1fr) 2.1rem;
    gap: 1rem;
    padding: 1.15rem 0;
  }
  .article-faq__question { font-size: .98rem; }
  .article-faq__toggle { width: 2.1rem; height: 2.1rem; }
  .article-faq__body { padding-right: 0; font-size: .95rem; }
}


/* ─────────────────────────────────────────────
   14. PROJECT SPOTLIGHT
   ───────────────────────────────────────────── */
.article-spotlight {
  width: min(var(--art-shell), 100%);
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

.article-spotlight__card {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(300px, 44vw, 420px);
  border: 1px solid var(--art-line);
  border-radius: 22px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.article-spotlight__card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}
.article-spotlight__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .92) 8%, rgba(0, 0, 0, .55) 48%, rgba(0, 0, 0, .2) 100%);
}
@media (hover: hover) and (pointer: fine) {
  .article-spotlight__card:hover { border-color: var(--art-line-2); }
  .article-spotlight__card:hover img { transform: scale(1.05); }
  .article-spotlight__card:hover .article-spotlight__link { gap: .9rem; color: #fff; }
}

.article-spotlight__body {
  position: relative;
  z-index: 2;
  max-width: 620px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.article-spotlight__body h2 {
  margin: 0 0 .6rem;
  font-family: var(--nlx-serif);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.35rem);
  line-height: 1.12;
  color: #fff;
}
.article-spotlight__body p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}
.article-spotlight__link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.25rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold2);
  transition: gap .25s ease, color .25s ease;
}

@media (max-width: 640px) {
  .article-spotlight__card::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .98) 0%,
      rgba(0, 0, 0, .91) 48%,
      rgba(0, 0, 0, .42) 100%
    );
  }

  .article-spotlight__body {
    padding: 1.5rem;
  }

  .article-spotlight__body p {
    color: rgba(255, 255, 255, .88);
  }

  .article-spotlight__link {
    min-height: 42px;
    padding: .65rem 1rem;
    border: 1px solid rgba(230, 205, 140, .7);
    border-radius: 999px;
    background: rgba(0, 0, 0, .78);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  }
}


/* ─────────────────────────────────────────────
   16. RESPONSIVE
   ───────────────────────────────────────────── */

/* Larger type on big monitors, matching the longer measure set in section 1 */
@media (min-width: 1440px) {
  .article-body { font-size: 1.125rem; }
}

/* Sidebar folds into a collapsible card */
@media (max-width: 1099.98px) {
  .article-shell {
    width: min(var(--art-measure), 100%);
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .article-side { display: none; }
  .article-toc-mobile { display: block; }
  .article-back--inline {
    display: inline-flex;
    margin-bottom: 1.75rem;
  }
}

@media (min-width: 1100px) {
  .article-back--inline { display: none; }
}


@media (max-width: 768px) {
  .article-body { font-size: 1.02rem; }

  .article-section {
    text-align: left;
  }

  .article-section ul,
  .article-section ol,
  .article-section .article-list,
  .article-section .article-stages {
    text-align: left;
  }

  .article-section__num {
    justify-content: flex-start;
    gap: .75rem;
    text-align: left;
  }

  .article-section__num::before {
    display: none;
  }

  .article-section__num::after {
    background: linear-gradient(90deg, var(--art-line-2), transparent);
  }

  .article-body h2 {
    width: 100%;
    font-size: clamp(1.9rem, 8vw, 2.15rem);
    line-height: 1.1;
    text-align: left;
    text-wrap: wrap;
  }

  .article-body h3 {
    text-align: left;
  }
}

@media (max-width: 460px) {
  .article-stages > li { padding-left: 2.75rem; }
}