/* Editorial reading pages: clear hierarchy without promotional filler. */
.reading-page { background: #fbfaf6; }
.reading-hero { position: relative; overflow: hidden; padding: clamp(76px, 10vw, 130px) 0 clamp(69px, 9vw, 110px); background: #eaf0e9; }
.reading-hero::after { content: ""; position: absolute; width: 470px; height: 470px; border: 1px solid #c6d6c8; border-radius: 50%; top: -270px; right: -110px; box-shadow: 0 0 0 85px #d8e6d922, 0 0 0 170px #d8e6d911; pointer-events: none; }
.reading-hero .container { position: relative; z-index: 1; }
.reading-kicker { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 20px; color: #527365; font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.reading-kicker::before { content: ""; width: 26px; height: 1px; background: #b18c50; }
.reading-hero h1 { max-width: 910px; margin: 0; font: 400 clamp(54px, 8vw, 103px)/1.04 var(--serif); letter-spacing: -.055em; }
.reading-hero p:last-child { max-width: 670px; margin: 26px 0 0; color: #44645b; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.7; }
.reading-layout { display: grid; grid-template-columns: minmax(185px, 230px) minmax(0, 1fr); align-items: start; gap: clamp(36px, 7vw, 110px); padding-top: 80px; padding-bottom: 120px; }
.reading-index { position: sticky; top: 24px; padding-top: 23px; border-top: 1px solid #bfd1c3; }
.reading-index > span { color: #527365; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.reading-index a { display: block; width: fit-content; max-width: 100%; margin-top: 19px; color: #395c50; font-size: 14px; text-decoration: none; line-height: 1.5; }
.reading-index a:hover { color: #0f4038; text-decoration: underline; text-underline-offset: 4px; }
.reading-content { min-width: 0; max-width: 850px; }
.reading-intro { max-width: 710px; margin: 0 0 45px; color: #425f58; font: 400 clamp(22px, 2.9vw, 31px)/1.48 var(--serif); }
.reading-article { scroll-margin-top: 25px; padding: 51px 0 63px; border-top: 1px solid #d6e2d7; }
.reading-article:first-of-type { padding-top: 0; border-top: 0; }
.reading-article__number { display: block; margin-bottom: 16px; color: #69917a; font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.reading-article h2 { max-width: 760px; margin: 0 0 23px; color: #173f43; font: 400 clamp(35px, 4.4vw, 52px)/1.13 var(--serif); letter-spacing: -.045em; }
.reading-article h3 { margin: 28px 0 12px; color: #204b45; font-size: 17px; }
.reading-article p, .reading-article li { color: #425b55; font-size: 16px; line-height: 1.8; }
.reading-article p { margin: 0 0 19px; }
.reading-article p:last-child { margin-bottom: 0; }
.reading-article ul { padding-left: 24px; margin: 0 0 22px; }
.reading-article li + li { margin-top: 9px; }
.reading-article a:not(.reading-button) { color: #175c4a; font-weight: 650; text-underline-offset: 4px; text-decoration: underline; }
.reading-example { margin: 28px 0; padding: clamp(22px, 4vw, 35px); border-radius: 8px; background: #153c3d; color: #fff; }
.reading-example > span { display: block; margin-bottom: 14px; color: #d2b88b; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.reading-example p { color: #e3eee5; font-size: 16px; }
.reading-example strong { color: #fff; }
.reading-example p:last-child { margin-bottom: 0; }
.reading-callout { margin: 28px 0; padding: 23px 26px; border-left: 3px solid #ae905f; background: #f3f1e9; color: #344f49; line-height: 1.7; }
.reading-callout strong { display: block; color: #173f43; margin-bottom: 4px; }
.reading-button { display: inline-flex; align-items: center; gap: 14px; min-height: 49px; margin-top: 9px; padding: 11px 17px; border-radius: 4px; background: #173f43; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; transition: background 180ms ease, transform 180ms ease; }
.reading-button:hover { background: #2c6154; transform: translateY(-2px); }
@media (max-width: 900px) {
  .reading-layout { grid-template-columns: 1fr; gap: 34px; padding-top: 48px; }
  .reading-index { position: static; padding: 0 0 20px; border-top: 0; border-bottom: 1px solid #bfd1c3; }
  .reading-index a { display: inline-block; margin: 12px 19px 0 0; }
}
@media (max-width: 620px) {
  .reading-hero { padding: 71px 0 74px; }
  .reading-hero h1 { font-size: clamp(49px, 11vw, 70px); }
  .reading-layout { padding-bottom: 76px; }
  .reading-article { padding: 38px 0 47px; }
  .reading-article h2 { font-size: clamp(34px, 8.5vw, 43px); }
}
@media (prefers-reduced-motion: reduce) {
  .reading-button { transition: none; }
  .reading-button:hover { transform: none; }
}