/* Article additions to the existing Affichr journal guide stylesheet. */
.hero { grid-template-columns: 1.25fr 1fr; gap: 48px; }
.hero h1 { font-size: clamp(38px, 4.1vw, 58px); }
.hero-art { padding-bottom: 0; }
.photo-frame img { height: 370px; object-position: center 56%; filter: grayscale(1); }
.photo-label { line-height: 1.5; }
.hero-meta .author-role { color: var(--muted); }
.introduction { padding-bottom: 0; }
.intro-copy .story-line { font-size: 28px; line-height: 1.45; font-weight: 700; letter-spacing: -.02em; border-left: 4px solid var(--red); padding-left: 24px; }
.disclosure a { display: inline-flex; min-height: 44px; align-items: center; margin-top: 8px; }
.mobile-toc { border-block: 1px solid var(--line); margin-top: 32px; }
.article-layout { margin-top: 48px; }
.article-section { padding-top: 28px; border-top: 1px solid var(--ink); margin-bottom: 52px; scroll-margin-top: 12px; }
.section-heading { display: flex; align-items: baseline; gap: 20px; margin-bottom: 24px; }
.section-number { font: 30px/1 Anton, Impact, sans-serif; color: var(--red-text); flex: none; }
.section-heading h2 { font-size: 31px; line-height: 1.3; text-wrap: pretty; }
.article-section p { max-width: 66ch; }
.article-section ul { padding-left: 24px; margin: 24px 0; }
.article-section li + li { margin-top: 10px; }
.article-section li::marker { color: var(--red-text); }
.article-section a { overflow-wrap: anywhere; }
.reference-note { background: var(--cream); border-left: 3px solid var(--red); padding: 24px 28px; margin-top: 24px; }
.personal-policy { background: var(--cream); border: 1px solid var(--line); padding: 24px 28px; margin-bottom: 24px; }
.personal-policy p { font-size: 23px; font-weight: 700; line-height: 1.55; }
.fee-table-wrap { margin: 28px 0; border: 1px solid var(--ink); }
.fee-table { width: 100%; border-collapse: collapse; font-size: 18px; line-height: 1.65; text-align: left; }
.fee-table caption { padding: 14px 20px; background: var(--ink); color: var(--paper); font-weight: 700; text-align: left; }
.fee-table thead { background: var(--cream); }
.fee-table th, .fee-table td { padding: 18px 20px; vertical-align: top; }
.fee-table th { font-weight: 700; }
.fee-table thead th:first-child { width: 32%; }
.fee-table tbody tr { border-top: 1px solid var(--line); }
.fee-table tbody th { font-size: 17px; }
.toc a { min-height: 48px; padding: 10px 0; }
.sidebar { max-height: calc(100dvh - 136px); overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
.closing { grid-template-columns: minmax(0, 1fr) auto; }
.closing h2 { font-size: 34px; }
.closing p:not(.eyebrow) { font-size: 18px; max-width: 55ch; margin-top: 18px; }
.related-guides a { display: inline-flex; align-items: center; min-height: 44px; }

@media (max-width: 1050px) {
  .hero { gap: 32px; }
  .hero h1 { font-size: 46px; }
  .photo-frame img { height: 360px; }
  .introduction { padding-bottom: 0; }
  .article-layout { margin-top: 32px; }
  .closing { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 720px; font-size: 50px; }
  .hero-art { max-width: 680px; }
  .photo-frame img { height: 340px; object-position: center 60%; }
}
@media (max-width: 640px) {
  .hero { gap: 24px; }
  .hero h1 { font-size: 38px; }
  .hero-art { padding: 0; }
  .photo-frame img { height: 260px; object-position: center 56%; }
  .hero-meta { gap: 10px; }
  .hero-meta div { gap: 6px; }
  .intro-copy .story-line { font-size: 23px; padding-left: 18px; }
  .section-heading { gap: 14px; align-items: flex-start; margin-bottom: 22px; }
  .section-number { font-size: 27px; padding-top: 5px; }
  .section-heading h2 { font-size: 27px; line-height: 1.3; }
  .article-section { padding-top: 24px; margin-bottom: 40px; scroll-margin-top: 4px; }
  .reference-note, .personal-policy { padding: 20px; }
  .personal-policy p { font-size: 20px; }
  .fee-table { font-size: 16px; }
  .fee-table th, .fee-table td { padding: 14px 12px; }
  .fee-table tbody th { font-size: 16px; overflow-wrap: anywhere; }
  .fee-table caption { padding: 14px 12px; }
  .fee-table thead th:first-child { width: 36%; }
  .closing h2 { font-size: 30px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 34px; }
  .photo-frame img { height: 230px; }
  .section-heading { gap: 12px; }
  .section-heading h2 { font-size: 24px; }
  .fee-table th, .fee-table td { padding: 12px 10px; }
  .fee-table thead th:first-child { width: 42%; }
}
@media print {
  .hero { display: block; }
  .hero h1 { font-size: 32px; }
  .article-section { scroll-margin-top: 0; }
  .section-heading { break-after: avoid; }
  .fee-table tr, .personal-policy { break-inside: avoid; }
}