.faq-page { --reading-width: 40rem; }
.faq-page .top .nav [aria-current] { color: var(--navy); border-bottom: 1px solid var(--gold); }
.skip { position: fixed; top: -8rem; left: 1rem; z-index: 20; padding: .6rem 1rem; background: white; }
.skip:focus { top: .5rem; }
.mast { background: var(--hall); border-bottom: 1px solid var(--line); }
.mast .wrap { max-width: 960px; padding: clamp(38px, 6vw, 78px) 0 clamp(30px, 4vw, 54px); }
.mast h1 { color: var(--navy); font: 400 clamp(48px, 7vw, 90px)/1.08 var(--display); }
.standfirst { max-width: 35em; margin: 20px 0 15px; color: var(--ink); font-size: clamp(22px, 2.6vw, 29px); line-height: 1.38; }
.byline { font: 400 15px/1.65 var(--label); color: var(--muted); }
.byline span { margin: 0 .3em; }
.reader { display: grid; grid-template-columns: 208px minmax(0, var(--reading-width)); gap: clamp(44px, 7vw, 88px); max-width: 960px; padding-block: clamp(35px, 5vw, 64px) 80px; }
.topics, .chapter, .answer, #reading, #top { scroll-margin-top: 95px; }
.topics { position: sticky; top: 90px; align-self: start; border-top: 3px double var(--gold); padding-top: 16px; }
.topics h2, .back, .related { font: 600 14px/1.5 var(--label); }
.topics h2 { letter-spacing: .13em; text-transform: uppercase; color: var(--gilt); margin-bottom: 11px; }
.topics ul { padding: 0; margin: 0; list-style: none; }
.topics li + li { border-top: 1px solid var(--line); }
.topics li a { display: block; padding: 7px 0; font: 400 19px/1.38 var(--body); color: var(--navy); text-decoration: none; }
.topics li a:hover, .answer h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.related { padding-top: 14px; }
.chapter, .chapter:nth-of-type(even) { background: transparent; padding: 0; border: 0; }
.chapter + .chapter { margin-top: 58px; }
.chapter h2, .feedback h2 { font: 400 clamp(33px, 4.2vw, 49px)/1.15 var(--display); color: var(--navy); }
.chapter h2 { border-bottom: 2px solid var(--gold); padding-bottom: 14px; }
.answer { padding: 23px 0 25px; border-bottom: 1px solid var(--line); }
.answer h3 { font: 500 clamp(24px, 2.5vw, 30px)/1.21 var(--body); text-wrap: pretty; }
.answer h3 a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 14px; color: var(--navy); text-decoration: none; }
.qnum { font: 600 14px/1.4 var(--label); letter-spacing: .06em; color: var(--gilt); }
.answer p, .feedback p { font-size: 21px; line-height: 1.56; }
.answer p { margin-top: 13px; }
.answer:target { border-bottom-color: var(--gold); }
.back { display: inline-block; padding-block: 10px; }
.feedback { padding: 28px; margin-top: 35px; border: 1px solid var(--line); background: var(--panel); }
.feedback h2 { font-size: 32px; margin-bottom: 9px; }
@media (max-width: 760px) {
  .reader { display: block; }
  .topics { position: static; margin-bottom: 38px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
  .topics ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .topics li, .topics li + li { border-top: 1px solid var(--line); }
  .topics li a { font-size: 18px; min-height: 42px; }
  .byline span { display: none; }
  .byline time { display: block; }
  .answer p, .feedback p { font-size: 20px; }
  .chapter + .chapter { margin-top: 38px; }
}
@media print {
  .top, .topics, .skip, .back, footer, .feedback { display: none; }
  .mast, .chapter, .reader { background: white; }
  .mast .wrap, .reader { display: block; width: 100%; max-width: none; padding: 1rem 0; }
  .chapter h2, .answer h3 { break-after: avoid; }
  .answer p { font-size: 11pt; }
  .answer h3 { font-size: 15pt; }
}