.memoir-article-hero {
  position: relative;
  min-height: 540px;
  display: grid;
  align-items: end;
  color: #fff;
  background: #182127 url("/assets/memoir-four-act-hero.jpg") center/cover no-repeat;
}
.memoir-article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(19, 27, 23, .94) 0%, rgba(19, 27, 23, .79) 43%, rgba(19, 27, 23, .14) 78%);
}
.memoir-article-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 88px 0 68px;
}
.memoir-article-hero .article-label {
  margin: 0 0 14px;
  color: #efd399;
  font-size: 14px;
  font-weight: 800;
}
.memoir-article-hero h1 {
  max-width: 760px;
  margin: 0;
  font-size: clamp(38px, 5vw, 66px);
  line-height: 1.08;
  letter-spacing: 0;
}
.memoir-article-hero .article-deck {
  max-width: 680px;
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: 19px;
  line-height: 1.8;
}
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; color: rgba(255, 255, 255, .72); font-size: 14px; }

.memoir-article-shell {
  width: min(1160px, calc(100% - 40px));
  display: grid;
  grid-template-columns: minmax(0, 790px) 250px;
  gap: 70px;
  align-items: start;
  margin: 0 auto;
  padding: 62px 0 80px;
}
.memoir-article { min-width: 0; }
.memoir-article .lead { margin: 0 0 26px; color: #303b40; font-size: 21px; line-height: 1.9; }
.memoir-article h2 { margin: 64px 0 20px; font-size: 34px; line-height: 1.24; letter-spacing: 0; scroll-margin-top: 110px; }
.memoir-article h3 { margin: 36px 0 12px; font-size: 24px; line-height: 1.35; letter-spacing: 0; }
.memoir-article p, .memoir-article li { color: #465157; font-size: 17px; line-height: 1.95; }
.memoir-article ul, .memoir-article ol { padding-left: 24px; }
.memoir-article strong { color: #202b30; }
.memoir-article a { color: #96312c; text-decoration: underline; text-underline-offset: 3px; }
.memoir-article figure { margin: 42px 0; }
.memoir-article figure img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; }
.memoir-article figcaption { margin-top: 10px; color: #737d81; font-size: 13px; line-height: 1.65; }
.article-note { margin: 30px 0; padding: 24px 26px; border-left: 4px solid #b68b49; background: #f7f1e7; color: #514633; font-size: 17px; line-height: 1.85; }
.article-example { margin: 28px 0; padding: 24px 26px; border: 1px solid #d7ddda; border-radius: 6px; background: #fff; }
.article-example .bad { color: #7b5250; }
.article-example .good { color: #254c35; }

.four-act-map { display: grid; grid-template-columns: 15fr 55fr 20fr 10fr; min-height: 112px; margin: 30px 0; overflow: hidden; border-radius: 6px; color: #fff; }
.four-act-map div { min-width: 0; display: grid; align-content: center; gap: 4px; padding: 15px; }
.four-act-map div:nth-child(1) { background: #355b43; }
.four-act-map div:nth-child(2) { background: #244530; }
.four-act-map div:nth-child(3) { background: #a9342e; }
.four-act-map div:nth-child(4) { background: #765f38; }
.four-act-map strong { color: #fff; font-size: 15px; }
.four-act-map span { color: rgba(255, 255, 255, .76); font-size: 12px; }

.article-table-wrap { margin: 28px 0; overflow-x: auto; border: 1px solid #d8ddda; background: #fff; }
.article-table { width: 100%; min-width: 680px; border-collapse: collapse; }
.article-table th, .article-table td { padding: 15px 16px; border-bottom: 1px solid #d8ddda; text-align: left; vertical-align: top; line-height: 1.7; }
.article-table th { color: #fff; background: #244530; }
.article-table tr:last-child td { border-bottom: 0; }

.question-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; padding: 0 !important; list-style: none; counter-reset: questions; }
.question-list li { min-width: 0; padding: 20px; border: 1px solid #d8ddda; border-radius: 6px; background: #fff; counter-increment: questions; }
.question-list li::before { content: counter(questions, decimal-leading-zero); display: block; margin-bottom: 8px; color: #a9342e; font-size: 13px; font-weight: 900; }
.rule-list { display: grid; gap: 12px; margin: 24px 0; padding: 0 !important; list-style: none; }
.rule-list li { padding: 20px 22px; border-left: 4px solid #244530; background: #edf2ee; }

.article-toc { position: sticky; top: 108px; padding-top: 4px; }
.article-toc strong { display: block; margin-bottom: 12px; font-size: 15px; }
.article-toc a { display: block; padding: 9px 0; border-bottom: 1px solid #d8ddda; color: #626d72; font-size: 14px; line-height: 1.45; }
.article-toc a:hover { color: #a9342e; }
.article-toc .toc-action { margin-top: 22px; padding: 18px; border: 1px solid #d8ddda; border-radius: 6px; background: #fff; }
.article-toc .toc-action p { margin: 0 0 12px; color: #626d72; font-size: 13px; line-height: 1.65; }
.article-toc .toc-action a { min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 12px; border: 0; border-radius: 5px; color: #fff; background: #a9342e; font-weight: 800; }

.article-related { padding: 70px 0; border-top: 1px solid #d8ddda; background: #fff; }
.article-related .hub-heading { margin-bottom: 26px; }

@media (max-width: 920px) {
  .memoir-article-shell { grid-template-columns: 1fr; gap: 0; }
  .article-toc { display: none; }
}
@media (max-width: 680px) {
  .memoir-article-hero { min-height: 520px; background-position: 62% center; }
  .memoir-article-hero::before { background: linear-gradient(90deg, rgba(19, 27, 23, .92), rgba(19, 27, 23, .55)); }
  .memoir-article-hero-inner, .memoir-article-shell { width: min(100% - 28px, 1160px); }
  .memoir-article-hero-inner { padding: 76px 0 48px; }
  .memoir-article-hero .article-deck { font-size: 17px; }
  .memoir-article-shell { padding: 44px 0 58px; }
  .memoir-article .lead { font-size: 19px; }
  .memoir-article h2 { margin-top: 52px; font-size: 29px; }
  .memoir-article p, .memoir-article li { font-size: 16px; }
  .four-act-map { grid-template-columns: 1fr; }
  .four-act-map div { min-height: 76px; }
  .question-list { grid-template-columns: 1fr; }
  .article-note, .article-example { padding: 20px; }
}