/* ==========================================================================
   A single article

   Two grounds, no rules. Everything down to the byline sits on
   Mono/Light-Dark -- the colour the thumbnails and the card hover already use
   -- and the reading column below returns to Mono/Dark. That step is the
   whole separation: there is no line anywhere on this page, not down the
   left, not between the rail and the column, and not between the contents
   entries.

   Held to the blog index's own 182 gutter.
   ========================================================================== */

.blog-article { overflow: clip; }

/* --- header ground ------------------------------------------------------- */

/* The card hover's own colour: Mono/Light-Dark at 14%, over the page's
   Mono/Dark. It lifts the header off the reading ground without becoming a
   surface of its own, which is the same job it does on the index. */
.blog-article__top {
  padding: calc(206 * var(--s)) calc(182 * var(--s)) calc(48 * var(--s));
  background: rgba(26, 36, 50, 0.14);
}

/* On this page the masthead sits on that lifted ground, so the pill and the
   Login button's own plates read as boxes on a box -- both were Mono/Light-
   Dark and Mono/Dark fills drawn for a header that had none. Cleared to the
   type and the brackets; the hover fills are untouched, so both still
   respond. Book a Demo keeps its plate: it is the page's one solid action. */
.blog-article .hero__nav-inner { background: transparent; }
.blog-article .hero__login .btn { --btn-bg: transparent; }

.blog-article__crumbs {
  margin: 0 0 calc(16 * var(--s));
  font-size: max(11px, calc(13 * var(--s)));
  color: var(--c-light-grey-02);
}
.blog-article__crumbs a { color: var(--c-light-grey-02); transition: color 200ms var(--ui-ease); }
.blog-article__crumbs a:hover { color: var(--c-accent-yellow); }

.blog-article__back { margin: 0 0 calc(28 * var(--s)); }
.blog-article__back a {
  font-size: max(11px, calc(15 * var(--s)));
  color: var(--c-light-grey-02);
  transition: color 200ms var(--ui-ease);
}
.blog-article__back a:hover { color: var(--c-accent-yellow); }

.blog-article__h {
  margin: 0;
  max-width: calc(1240 * var(--s));
  font-family: var(--f-sans);
  font-weight: 300;
  font-size: calc(56 * var(--s));
  line-height: 1.2;
  letter-spacing: calc(-1.68 * var(--s));
  color: var(--c-mono-light);
}

.blog-article__plate {
  height: calc(620 * var(--s));
  margin-top: calc(48 * var(--s));
  background: var(--c-mono-dark);
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: clip-path calc(var(--rv-dur) * 1.1) var(--rv-ease);
  transition-delay: calc(4 * var(--rv-step));
}
.blog-article.is-in .blog-article__plate { clip-path: inset(0 0 0 0); }
.blog-article__plate img { width: 100%; height: 100%; object-fit: cover; }

/* Values only -- no WRITTEN BY / PUBLISHED ON / TIME above them -- and Arame
   for all three, which is what .mono already is. */
.blog-article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: calc(56 * var(--s));
  margin: calc(40 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
  color: var(--c-mono-light);
  letter-spacing: 0.02em;
}

/* --- reading ground ------------------------------------------------------ */

.blog-article__main {
  display: grid;
  grid-template-columns: calc(360 * var(--s)) minmax(0, 1fr);
  gap: calc(120 * var(--s));
  padding: calc(88 * var(--s)) calc(182 * var(--s)) calc(140 * var(--s));
  background: var(--c-mono-dark);
}

/* One rule between the contents and the column. It is drawn on the rail's
   right edge rather than as a grid item so it runs the height of whichever
   of the two is taller, without a third column in the template. */
.blog-article__rail {
  position: sticky;
  top: calc(64 * var(--s));
  align-self: stretch;
  padding-right: calc(60 * var(--s));
  border-right: 1px solid var(--c-hairline);
}

/* Contents: the entries and nothing else. */
.blog-article__toc { display: flex; flex-direction: column; }
.blog-article__toc a {
  padding: calc(12 * var(--s)) 0;
  font-family: var(--f-sans);
  font-size: max(11px, calc(16 * var(--s)));
  line-height: 1.5;
  color: var(--c-light-grey-02);
  transition: color 200ms var(--ui-ease);
}
.blog-article__toc a:hover { color: var(--c-mono-light); }

.blog-article__share {
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--s));
  margin-top: calc(32 * var(--s));
  padding: 0;
  font-family: var(--f-tech);
  font-weight: 300;
  font-size: max(11px, calc(14 * var(--s)));
  letter-spacing: 0.08em;
  color: var(--c-mono-light);
  cursor: pointer;
  transition: color 200ms var(--ui-ease);
}
.blog-article__share:hover { color: var(--c-accent-yellow); }
.blog-article__share-icon { width: calc(16 * var(--s)); min-width: 13px; height: auto; }

.blog-article__body { max-width: calc(880 * var(--s)); }
.blog-article__body p {
  margin: 0 0 calc(28 * var(--s));
  font-size: max(11px, calc(20 * var(--s)));
  line-height: 1.7;
  color: var(--c-light-grey-02);
}
/* And one that closes it. */
.blog-article__end {
  height: 0;
  margin: calc(72 * var(--s)) 0 0;
  border: 0;
  border-top: 1px solid var(--c-hairline);
}

.blog-article__body h2 {
  margin: calc(56 * var(--s)) 0 calc(24 * var(--s));
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: calc(30 * var(--s));
  line-height: 1.35;
  letter-spacing: calc(-0.9 * var(--s));
  color: var(--c-mono-light);
  scroll-margin-top: calc(48 * var(--s));
}

/* ==========================================================================
   Reflow
   ========================================================================== */

@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  .blog-article__top { padding: 24px 20px 32px; }
  .blog-article__back { margin: 48px 0 16px; }
  .blog-article__h { margin-top: 12px; font-size: clamp(28px, 7vw, 40px); letter-spacing: -0.02em; }
  .blog-article__plate { height: auto; aspect-ratio: 16 / 9; margin-top: 24px; }
  .blog-article__byline { gap: 18px; margin-top: 20px; font-size: 12px; }
  .blog-article__end { margin-top: 44px; }

  /* One column: the contents lead the piece rather than sitting beside it. */
  .blog-article__main {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 20px 56px;
  }
  .blog-article__rail { position: static; padding-right: 0; border-right: 0; }
  .blog-article__toc a { padding: 9px 0; font-size: 14px; }
  .blog-article__body { max-width: none; }
  .blog-article__body p { font-size: 16px; margin-bottom: 20px; }
  /* And one that closes it. */
.blog-article__end {
  height: 0;
  margin: calc(72 * var(--s)) 0 0;
  border: 0;
  border-top: 1px solid var(--c-hairline);
}

.blog-article__body h2 { margin: 36px 0 14px; font-size: clamp(20px, 4.6vw, 26px); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-article__plate { clip-path: none; transition: none; }
}