/* Field note articles. Loaded only on /blog/<note>/ pages, after the shared
   sheets, so the selectors here win over the generic .inner-page rules.
   Everything on the page sits on one spine: the hero picture, the rail and
   the text column are all measured from the same three variables. */
.article-page{--rail:200px;--gutter:72px;--measure:680px;--spine:952px;--note-ink:#2f342d;--note-body:#4b5147;--note-quiet:#666c5f;--note-rule:#dfe2d7}

/* ---------------------------------------------------------------- the head */
/* The topic replaces the old eyebrow, which repeated the date printed two
   lines below it. The date moves down to the byline, where a reader looks
   for it anyway. */
.article-hero>.container{max-width:var(--spine);margin-inline:auto}
.article-page .back-link{margin-bottom:0}
.article-page .article-hero>.container{padding-top:4px}
.article-tag{margin-left:14px;display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#4d5a33;background:#e9edda;border-radius:20px;padding:8px 15px 8px 13px}
.article-tag:before{content:'';width:7px;height:7px;border-radius:2px;background:#ABC502}
.article-page .article-hero h1{max-width:var(--spine);margin-top:30px;letter-spacing:-2.2px}
.article-byline{display:flex;align-items:center;gap:13px;margin-top:32px;padding-top:26px;border-top:1px solid var(--note-rule);max-width:var(--spine)}
.article-byline>img{width:44px;height:44px;border-radius:50%;background:#343b31;padding:7px;flex:none}
.article-byline>span{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--note-quiet)}
.article-byline b{font-weight:600;font-size:14.5px;color:var(--note-ink)}

/* The figure sits between two light sections rather than inside one, so it
   paints the page ground itself. The picture inside holds the same spine as
   the article, cropped wider than its 1200x630 source so it reads as a
   banner rather than a slab half a screen deep. */
.note-hero{margin:0;padding:8px 40px 0;background:var(--paper)}
.note-hero>img{display:block;width:100%;max-width:var(--spine);margin-inline:auto;height:auto;aspect-ratio:24/10;object-fit:cover;border-radius:16px;background:#eceee4}

/* ------------------------------------------------------------- the columns */
/* The old grid pushed the text hard against the right edge of the container
   and left the rail stranded on the far side of a 200px gap. The pair is now
   measured and centred, so the article sits on the optical middle. */
.article-page .article-layout{grid-template-columns:var(--rail) minmax(0,var(--measure));gap:var(--gutter);justify-content:center;max-width:var(--spine);margin-inline:auto;border-top:1px solid var(--note-rule);padding-top:42px}
.article-page .article-section{padding:26px 0 54px}

.article-page .story-sidebar{gap:0;top:112px;font-size:13.5px}
.article-page .story-sidebar>span{margin:0 0 16px;font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--note-quiet)}
/* A rail down the left of the contents doubles as the reader's position: the
   marker on the current section is the only lime thing in the column. */
.story-toc{display:flex;flex-direction:column;border-left:1px solid var(--note-rule)}
.article-page .story-sidebar .story-toc>a{position:relative;padding:9px 0 9px 18px;line-height:1.5;color:#5f6657;transition:color .2s}
.article-page .story-sidebar .story-toc>a:before{content:'';position:absolute;left:-1px;top:9px;bottom:9px;width:2px;background:transparent;transition:background .2s}
.article-page .story-sidebar .story-toc>a:hover{color:var(--note-ink)}
.article-page .story-sidebar .story-toc>a[aria-current=true]{color:var(--note-ink);font-weight:500}
.article-page .story-sidebar .story-toc>a[aria-current=true]:before{background:#ABC502}
.story-cta{display:inline-block;margin-top:22px;padding-top:20px;border-top:1px solid var(--note-rule);font-size:13px}

/* ------------------------------------------------------------- the reading */
/* refinements.css sets the reading colour through a long :is() list that
   resolves to three classes and two elements. These selectors have to clear
   that bar, which is why several of them name one class more than they
   strictly need to. */
.article-page .light-section .article-layout .reading-copy{font-size:18px;line-height:1.72;color:var(--note-body)}
.article-page .reading-copy p{margin:0 0 26px}
.article-page .reading-copy>div>p:first-child{font-size:20.5px;line-height:1.62;color:#3b4135}
.article-page .reading-copy h2,.article-page .reading-copy h3{position:relative;color:var(--note-ink);font-weight:600;letter-spacing:-1.1px;line-height:1.22;scroll-margin-top:104px}
/* A short rule above each heading, rather than a heavier type size, is what
   separates one part of the note from the next. */
.article-page .reading-copy h2{font-size:29px;margin:58px 0 22px;padding-top:26px}
.article-page .reading-copy h2:before{content:'';position:absolute;top:0;left:0;width:30px;height:3px;border-radius:2px;background:#ABC502}
.article-page .reading-copy h3{font-size:23px;margin:44px 0 18px}
.article-page .reading-copy h4{font-size:19px;margin:36px 0 14px}
.article-page .reading-copy ul,.article-page .reading-copy ol{padding-left:22px;margin:0 0 26px}
.article-page .reading-copy li{margin-bottom:11px;padding-left:4px}
.article-page .reading-copy li::marker{color:#9aab6b}
.article-page .reading-copy strong{font-weight:600;color:var(--note-ink)}
.article-page .reading-copy a{color:#4c5a00;text-decoration-thickness:1px;text-underline-offset:3px}
.article-page .reading-copy blockquote{background:transparent;border-left:3px solid #ABC502;padding:4px 0 4px 26px;margin:36px 0;font-size:21px;line-height:1.55;letter-spacing:-.4px;color:#3b4135}
.article-page .reading-copy blockquote p:last-child{margin-bottom:0}

/* Takeaways now follow the opening paragraph instead of standing in front of
   it, so the note still opens with its hook. */
/* Every rule here carries the .article-page prefix: the article's own list
   and heading rules are two classes deep, and would otherwise take back the
   padding these markers are positioned into. */
.article-page .note-points{background:#eef2e2;border:1px solid #dae2c6;border-radius:14px;padding:26px 30px 28px;margin:6px 0 40px}
.article-page .light-section .note-points>h2{font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#55603f;font-weight:600;margin:0 0 16px;padding:0;line-height:1.4}
.article-page .note-points>h2:before{display:none}
.article-page .note-points>ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.article-page .note-points>ul>li{position:relative;padding:0 0 0 26px;font-size:15.5px;line-height:1.6;color:#3c4335;margin:0}
.article-page .note-points>ul>li:before{content:'';position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;background:#ABC502}

/* ---------------------------------------------------------------- the tail */
/* The questions are part of the same read as the article, so they hold the
   text column rather than the spine — otherwise the section opens back out
   to the rail and the page loses its axis halfway down. */
.note-faq{padding:0 0 74px}
.note-faq>.container{max-width:var(--spine);margin-inline:auto;padding-left:calc(var(--rail) + var(--gutter));padding-top:54px;border-top:1px solid var(--note-rule)}
.note-faq .eyebrow{display:block;margin-bottom:14px}
.note-faq h2{font-weight:600;font-size:clamp(28px,3.2vw,40px);line-height:1.15;letter-spacing:-1.6px;margin:0 0 30px}
.note-faq .faq-list{max-width:var(--measure)}
.note-faq .faq-list details:last-child{border-bottom:1px solid #d6dfc8}

/* The rail repeats the picture from each note it points at, so the three
   cards are told apart by their subject and not only by their headline. */
.related-notes{gap:24px}
.related-notes>a{position:relative;border:1px solid #dcded6;border-top:1px solid #dcded6;border-radius:16px;padding:0;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease}
.related-notes>a:hover{transform:translateY(-4px);box-shadow:0 14px 30px #2f3a2214}
.related-shot{display:block;aspect-ratio:1200/630;overflow:hidden;background:#eceee4;font-size:0}
.related-shot>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.related-notes>a:hover .related-shot>img{transform:scale(1.045)}
.article-page .related-notes .related-tag{display:block;font-size:11px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;color:#6e7565;margin:22px 24px 0}
.article-page .related-notes h3{font-size:20px;font-weight:600;letter-spacing:-.6px;line-height:1.32;margin:12px 24px 0}
.article-page .notes-more .related-notes b{font-size:12.5px;font-weight:600;margin:20px 24px 24px;padding-top:0;color:#4c5a00}

/* ------------------------------------------------------------------ narrow */
@media(max-width:1100px){
  .article-page{--rail:170px;--gutter:48px;--measure:640px;--spine:858px}
  .article-page .reading-copy h2{font-size:27px}
}
@media(max-width:900px){
  .note-hero{padding:6px 24px 0}
  .note-hero>img{border-radius:13px}
}
@media(max-width:780px){
  .article-page{--spine:100%;--rail:0px;--gutter:0px;--measure:100%}
  .article-page .article-layout{grid-template-columns:1fr;gap:0;padding-top:26px}
  .note-faq>.container{padding-top:44px}
  .article-page .story-sidebar{position:static;display:block;padding-bottom:24px;margin-bottom:6px;border-bottom:1px solid var(--note-rule)}
  .article-page .story-sidebar>span{margin-bottom:12px}
  .story-toc{flex-direction:row;flex-wrap:wrap;gap:7px;border:0;padding:0}
  .article-page .story-sidebar .story-toc>a{padding:8px 13px;border:1px solid #dfe2d7;border-radius:20px;font-size:12.5px;background:#fff}
  .article-page .story-sidebar .story-toc>a:before{display:none}
  .article-page .story-sidebar .story-toc>a[aria-current=true]{border-color:#ABC502;background:#f1f6e0}
  .story-cta{margin-top:18px;padding-top:16px;display:block}
  .article-page .light-section .article-layout .reading-copy{font-size:16.5px;line-height:1.76}
  .article-page .reading-copy>div>p:first-child{font-size:18px}
  .article-page .reading-copy h2{font-size:24px;margin-top:46px;padding-top:22px}
  .article-page .reading-copy h3{font-size:20px}
  .article-page .reading-copy blockquote{font-size:18.5px;padding-left:20px}
  .article-byline{margin-top:26px;padding-top:22px}
  .note-points{padding:22px 22px 24px;margin-bottom:34px;border-radius:12px}
  .note-points>ul>li{font-size:15px}
  .note-faq{padding:0 0 56px}
  .related-notes>a{border-radius:14px}
}
@media(max-width:600px){
  .note-hero{padding:4px 20px 0}
  .note-hero>img{aspect-ratio:16/10}
}