/*
  The Journal — article + index styling.

  Loaded AFTER /seo-pages.css, which supplies the shared shell (header, nav,
  breadcrumbs, buttons, footer) and the colour tokens. Everything here is
  scoped to the journal surfaces so the service, project and guide pages are
  untouched.

  The one deliberate divergence from the rest of the static pages: the journal
  loads the real brand faces (Cormorant Garamond + Inter) rather than falling
  back to Georgia. Long-form reading is where the type actually earns its bytes.
*/

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter Journal";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

.journal {
  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --measure: 68ch;
  font-family: "Inter Journal", Inter, ui-sans-serif, system-ui, sans-serif;
}
.journal h1,
.journal h2,
.journal h3,
.journal h4,
.journal .display {
  font-family: var(--display);
  font-weight: 500;
}

/* ------------------------------------------------------------- progress */

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--walnut-deep), var(--oak) 70%, #e0bd8a);
}

/* ------------------------------------------------------------ hero head */

.article-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 780px);
  padding: 140px 0 clamp(44px, 6vw, 84px);
  overflow: hidden;
  background: var(--walnut-deep);
  isolation: isolate;
}
.article-hero > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
}
.article-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(24, 18, 13, 0.62) 0%, rgba(24, 18, 13, 0.2) 34%, rgba(24, 18, 13, 0.78) 78%, rgba(24, 18, 13, 0.94) 100%),
    linear-gradient(96deg, rgba(24, 18, 13, 0.72) 0%, rgba(24, 18, 13, 0.22) 62%, transparent 100%);
}
.article-hero .wrap {
  position: relative;
}
.hero-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 22px;
  color: var(--oak);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero-kicker .rule {
  width: 46px;
  height: 1px;
  background: var(--oak);
}
.article-hero h1 {
  max-width: 19ch;
  margin: 0;
  color: #fffdf8;
  font-size: clamp(2.4rem, 5.6vw, 4.9rem);
  line-height: 1.03;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(20, 14, 9, 0.55);
}
.article-hero .dek {
  max-width: 60ch;
  margin: 26px 0 0;
  color: rgba(255, 253, 248, 0.86);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.7;
}
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin: 34px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(196, 147, 85, 0.42);
  color: rgba(255, 253, 248, 0.72);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}
.byline strong {
  color: #fffdf8;
  font-weight: 700;
}
.byline .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--oak);
}

/* ------------------------------------------------------------ the shell */

.article-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(46px, 6vw, 86px) 0 20px;
}
@media (min-width: 1080px) {
  .article-shell {
    grid-template-columns: 232px minmax(0, 1fr);
  }
}

/* The film band is a full-width sibling between two shells, so the second
   shell keeps an empty first column to hold the body copy on the same axis. */
.article-shell.continued {
  padding-top: 0;
}
.article-shell.continued .article-aside {
  display: none;
}
@media (min-width: 1080px) {
  .article-shell.continued .article-aside {
    display: block;
  }
}

.article-aside {
  position: relative;
}
@media (min-width: 1080px) {
  .article-aside > .aside-inner {
    position: sticky;
    top: 34px;
  }
}
.aside-label {
  margin: 0 0 14px;
  color: var(--oak-dark);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.toc ol {
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--line);
  list-style: none;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
}
.toc a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
  text-decoration: none;
  transition: color 180ms ease, border-color 180ms ease;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  margin-right: 10px;
  color: var(--oak);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.toc a:hover,
.toc a:focus-visible {
  color: var(--walnut);
}
.toc a[aria-current="true"] {
  border-left-color: var(--oak);
  color: var(--ink);
  font-weight: 600;
}
.toc-mobile {
  margin: 0 0 30px;
  border: 1px solid var(--line);
  background: var(--plaster);
}
.toc-mobile summary {
  padding: 16px 20px;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.toc-mobile .toc {
  padding: 0 20px 16px;
}
@media (min-width: 1080px) {
  .toc-mobile {
    display: none;
  }
}
.article-aside .toc {
  display: none;
}
@media (min-width: 1080px) {
  .article-aside .toc {
    display: block;
  }
}

/* --------------------------------------------------------------- share */

.share {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-buttons a,
.share-buttons button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  min-width: 42px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--walnut);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.share-buttons a:hover,
.share-buttons button:hover,
.share-buttons a:focus-visible,
.share-buttons button:focus-visible {
  border-color: var(--oak);
  background: var(--plaster);
  color: var(--walnut-deep);
}
.share-buttons svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.share-buttons svg.stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Scroll reveals are opt-in and only exist once the script has run, so a
   failed or blocked script can never leave the article invisible. */
.journal-js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
}
.journal-js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 720ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .journal-js [data-reveal] {
    opacity: 1;
    transform: none;
  }
  .journal-js [data-reveal].is-in {
    transition: none;
  }
}
.share-status {
  margin: 10px 0 0;
  min-height: 1.1em;
  color: var(--oak-dark);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.share-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 64px 0 0;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--plaster);
}
.share-inline p,
.article-body .share-inline p {
  margin: 0;
  max-width: 34ch;
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 1.2;
}
.share-inline .share-status,
.article-body .share-inline .share-status {
  margin-top: 10px;
  font-family: "Inter Journal", Inter, sans-serif;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--oak-dark);
}

/* ---------------------------------------------------------- answer box */

.answer-box {
  position: relative;
  margin: 0 0 46px;
  padding: 30px 32px 32px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--oak);
  background: linear-gradient(180deg, var(--plaster), var(--paper) 82%);
}
.answer-box h2 {
  margin: 0 0 8px;
  font-size: 1.32rem;
  letter-spacing: 0;
}
.answer-box .direct {
  margin: 0 0 20px;
  max-width: var(--measure);
  font-family: var(--display);
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.42;
  color: var(--ink);
}
.answer-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.answer-box li {
  position: relative;
  padding-left: 26px;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.62;
}
.answer-box li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 14px;
  height: 1px;
  background: var(--oak);
}

/* ----------------------------------------------------------- body copy */

.article-body {
  max-width: 100%;
}
.article-section {
  padding: 8px 0 46px;
  scroll-margin-top: 24px;
}
.article-section > h2 {
  position: relative;
  max-width: 22ch;
  margin: 0 0 22px;
  font-size: clamp(1.85rem, 3.2vw, 2.8rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.article-section > h2 .num {
  display: block;
  margin-bottom: 12px;
  color: var(--oak-dark);
  font-family: "Inter Journal", Inter, sans-serif;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
}
.article-body h3 {
  max-width: 30ch;
  margin: 38px 0 12px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.article-body p {
  max-width: var(--measure);
  margin: 0 0 18px;
  color: #3c342d;
  font-size: 1.06rem;
  line-height: 1.78;
}
.article-body a:not(.button):not(.text-link) {
  color: var(--walnut);
  text-decoration-color: var(--oak);
  text-underline-offset: 4px;
}
/* The opening paragraph of the first real section — `:first-of-type` cannot be
   used here because the answer box is also a <section> sibling. */
.answer-box + .article-section > p:first-of-type::first-letter,
.lede-drop::first-letter {
  float: left;
  margin: 0.06em 0.11em 0 0;
  color: var(--walnut);
  font-family: var(--display);
  font-size: 3.5em;
  font-weight: 600;
  line-height: 0.78;
}
.article-body ul,
.article-body ol {
  max-width: var(--measure);
  margin: 0 0 24px;
  padding-left: 0;
  list-style: none;
}
.article-body ol {
  counter-reset: step;
}
.article-body ul li,
.article-body ol li {
  position: relative;
  margin: 0 0 12px;
  padding-left: 30px;
  color: #3c342d;
  font-size: 1.02rem;
  line-height: 1.7;
}
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 16px;
  height: 1px;
  background: var(--oak);
}
.article-body ol li {
  counter-increment: step;
}
.article-body ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.16em;
  color: var(--oak-dark);
  font-family: "Inter Journal", Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.pull-quote {
  max-width: 30ch;
  margin: 44px 0;
  padding: 0 0 0 26px;
  border-left: 3px solid var(--oak);
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.9vw, 2.15rem);
  font-style: italic;
  line-height: 1.28;
  color: var(--walnut-deep);
}
.pull-quote p {
  max-width: none;
  margin: 0;
  font: inherit;
  color: inherit;
}

.callout {
  max-width: var(--measure);
  margin: 34px 0;
  padding: 24px 26px;
  border: 1px solid rgba(196, 147, 85, 0.5);
  background: rgba(196, 147, 85, 0.09);
}
.callout h4 {
  margin: 0 0 8px;
  font-family: "Inter Journal", Inter, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oak-dark);
}
.callout p {
  margin: 0;
  color: #3c342d;
}

.table-wrap {
  max-width: 100%;
  margin: 32px 0 36px;
  overflow-x: auto;
  border: 1px solid var(--line);
}
.table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.table-wrap caption {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--plaster);
  color: var(--oak-dark);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-align: left;
  text-transform: uppercase;
}
.table-wrap th,
.table-wrap td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.table-wrap thead th {
  background: var(--paper);
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.table-wrap tbody th,
.table-wrap tbody td:first-child {
  color: var(--ink);
  font-weight: 600;
}
.table-wrap tbody td {
  color: var(--muted);
}
.table-wrap tbody tr:last-child th,
.table-wrap tbody tr:last-child td {
  border-bottom: 0;
}
.table-wrap tbody tr:nth-child(even) {
  background: rgba(246, 241, 232, 0.5);
}

.article-figure {
  margin: 40px 0;
}
.article-figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--line);
}
.article-figure figcaption {
  margin-top: 12px;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.6;
}

/* -------------------------------------------------------- mid-article CTA */

.inline-cta {
  position: relative;
  margin: 56px 0;
  padding: clamp(30px, 4vw, 46px);
  overflow: hidden;
  background: var(--walnut-deep);
  color: var(--plaster);
}
.inline-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      104deg,
      rgba(196, 147, 85, 0.14) 0 2px,
      transparent 2px 9px
    );
  opacity: 0.5;
  pointer-events: none;
}
.inline-cta > * {
  position: relative;
}
.inline-cta .eyebrow {
  color: var(--oak);
}
.inline-cta h2 {
  max-width: 20ch;
  margin: 0 0 14px;
  color: #fffdf8;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  line-height: 1.12;
}
.inline-cta p {
  max-width: 56ch;
  margin: 0 0 26px;
  color: rgba(246, 241, 232, 0.78);
  font-size: 1rem;
  line-height: 1.7;
}
.inline-cta .hero-actions {
  margin-top: 0;
}
/*
  The CTA lives inside .article-body, and `.article-body ul li` matches the
  trust list's <li> directly — which beats an inherited colour set on the <ul>.
  These have to be scoped to the list items themselves or the credentials
  render in body-copy brown on a walnut panel (measured 1.3:1).
*/
.article-body .inline-cta .trust {
  max-width: none;
  margin: 30px 0 0;
  padding: 22px 0 0;
  gap: 10px 26px;
  border-top-color: rgba(196, 147, 85, 0.32);
}
.article-body .inline-cta .trust li {
  margin: 0;
  padding-left: 22px;
  color: rgba(246, 241, 232, 0.78);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.article-body .inline-cta .trust li::before {
  left: 0;
  top: 0.66em;
  width: 14px;
  background: var(--oak);
}
.article-body .inline-cta .trust a {
  color: var(--oak);
  text-decoration-color: rgba(196, 147, 85, 0.55);
}
.article-body .inline-cta .trust a:hover {
  color: #e0bd8a;
}

/* --------------------------------------------------------- scroll film */

.scroll-film {
  position: relative;
  margin: 64px 0;
  /* Tall band: the sticky frame inside travels one viewport of scroll and the
     footage is scrubbed against that travel. */
  height: 230vh;
}
.scroll-film .film-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #17110c;
}
.scroll-film video,
.scroll-film .film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scroll-film .film-poster {
  z-index: 0;
}
.scroll-film video {
  z-index: 1;
  opacity: 0;
  transition: opacity 500ms ease;
}
.scroll-film[data-ready="true"] video {
  opacity: 1;
}
.scroll-film .film-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(23, 17, 12, 0.5) 0%, transparent 30%, transparent 52%, rgba(23, 17, 12, 0.88) 100%);
  pointer-events: none;
}
.scroll-film figcaption {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 64px) clamp(34px, 6vw, 64px);
}
.scroll-film figcaption .eyebrow {
  margin-bottom: 10px;
  color: var(--oak);
}
.scroll-film figcaption p {
  max-width: 34ch;
  margin: 0;
  color: #fffdf8;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.8vw, 2.2rem);
  line-height: 1.22;
  text-shadow: 0 2px 30px rgba(20, 14, 9, 0.6);
}
.film-rail {
  position: absolute;
  left: clamp(20px, 5vw, 64px);
  right: clamp(20px, 5vw, 64px);
  bottom: clamp(20px, 3vw, 30px);
  z-index: 3;
  height: 2px;
  background: rgba(255, 253, 248, 0.22);
}
.film-rail span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--oak);
}
@media (prefers-reduced-motion: reduce) {
  .scroll-film {
    height: auto;
  }
  .scroll-film .film-sticky {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .scroll-film video {
    display: none;
  }
  .film-rail {
    display: none;
  }
}

/* ------------------------------------------------------------- FAQ + end */

.journal .faq-block {
  padding: 12px 0 20px;
}
.journal .faq-list summary {
  font-family: var(--display);
}
.journal .faq-list details[open] summary {
  color: var(--walnut);
}

.article-end {
  margin-top: 20px;
  padding: 34px 0 0;
  border-top: 1px solid var(--line);
}
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tag-row li {
  padding: 7px 13px;
  border: 1px solid var(--line);
  background: var(--plaster);
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ index page */

.journal-hero {
  padding: clamp(56px, 8vw, 110px) 0 clamp(40px, 5vw, 70px);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 120% at 12% 0%, rgba(196, 147, 85, 0.16), transparent 62%),
    linear-gradient(110deg, var(--plaster), var(--paper));
}
.journal-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
}
.journal-hero h1 em {
  font-style: italic;
  color: var(--walnut);
}

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-card {
  display: flex;
  height: 100%;
}
.post-card > a {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  text-decoration: none;
  transition: box-shadow 320ms ease, transform 320ms ease;
}
.post-card > a:hover,
.post-card > a:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 60px rgba(28, 26, 23, 0.18);
}
.post-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--plaster);
}
.post-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-card > a:hover img,
.post-card > a:focus-visible img {
  transform: scale(1.055);
}
.post-card .rule {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--oak);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.post-card > a:hover .rule,
.post-card > a:focus-visible .rule {
  transform: scaleX(1);
}
.post-card .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 26px 26px 28px;
}
.post-card .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--oak-dark);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.post-card .meta .sep {
  width: 14px;
  height: 1px;
  background: var(--oak);
}
.post-card .meta .time {
  color: var(--muted);
}
.post-card h2,
.post-card h3 {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.16;
  color: var(--ink);
  transition: color 240ms ease;
}
.post-card > a:hover h2,
.post-card > a:hover h3,
.post-card > a:focus-visible h2,
.post-card > a:focus-visible h3 {
  color: var(--walnut);
}
.post-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.66;
}
.post-card .more {
  margin-top: auto;
  padding-top: 6px;
  color: var(--walnut);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.post-card.featured {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .post-card.featured > a {
    flex-direction: row-reverse;
  }
  .post-card.featured figure {
    flex: 1 1 52%;
  }
  .post-card.featured img {
    height: 100%;
    aspect-ratio: auto;
    min-height: 24rem;
  }
  .post-card.featured .card-body {
    flex: 1 1 48%;
    justify-content: center;
    padding: clamp(30px, 4vw, 56px);
  }
  .post-card.featured h2 {
    font-size: clamp(1.9rem, 3vw, 2.8rem);
  }
  .post-card.featured p {
    font-size: 1rem;
  }
}
.post-card .flag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  padding: 8px 14px;
  background: var(--walnut);
  color: var(--plaster);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.related-posts {
  padding: 70px 0 84px;
  border-top: 1px solid var(--line);
}

@media (max-width: 640px) {
  .article-hero {
    min-height: 0;
    padding: 116px 0 44px;
  }
  .answer-box {
    padding: 24px 22px 26px;
  }
  .share-inline {
    padding: 22px;
  }
  .scroll-film {
    margin: 44px 0;
    height: 190vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .post-card > a,
  .post-card img,
  .post-card .rule {
    transition: none;
  }
  .post-card > a:hover {
    transform: none;
  }
  .reading-progress {
    display: none;
  }
}