/* article.css — the article shell (pages_guides.shell / article-template.html) and the article kit's skin, in the
   design's own tokens. Linked after site.css, tokens.css, inner.css and assets/article-kit.css. */
:root {
  --ak-ink: var(--text); --ak-muted: var(--mute); --ak-rule: var(--rule); --ak-accent: var(--ember);
  --ak-surface: var(--panel); --ak-tint: var(--panel-2); --ak-zebra: rgba(236, 231, 222, .028); --ak-radius: 2px;
  --ak-top: 104px; --ak-side: 280px; --ak-gap: clamp(48px, 5vw, 96px); --ak-ui-font: var(--f-d);
  --ar-col: 45rem;   /* 45rem: about 97 characters a line at 17px (48rem measured 104 on the first article, 25 Oct 2026) */
}
/* the reading pair (article column + side column) is centred; the hero frame runs the full container */
.ar-head, .ar-layout { max-width: calc(var(--ar-col) + var(--ak-gap) + var(--ak-side) + 2 * var(--gut)); }
.ar-head { padding-top: clamp(40px, 6vw, 88px); padding-bottom: 40px; }
.ar-head .ip-k { margin-bottom: 18px; }
.ip .ar-h1 { font-size: clamp(38px, 4.6vw, 80px); line-height: 1; max-width: 22ch; }
.ar-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ar-meta > * + *::before { content: ''; display: inline-block; width: 14px; height: 1px; margin: 0 14px 3px 0; vertical-align: middle; background: var(--line-2); }
.ar-meta time { color: var(--text); }
.ar-meta a { color: inherit; border-bottom: 1px solid var(--line-2); transition: color .3s, border-color .3s; }
.ar-meta a:hover { color: var(--text); border-bottom-color: var(--ember); }
.ar-hero .frame-in { aspect-ratio: 21 / 9; border: 1px solid var(--line-2); }
.ar-layout { padding-top: 56px; }
@media (min-width: 1100px) {
  .ak-layout.ar-layout { grid-template-columns: minmax(0, var(--ar-col)) var(--ak-side); justify-content: space-between; }
}
.ak-main { min-width: 0; }
/* tablet and phone: one column, still held to the reading measure */
@media (max-width: 1099px) { .ak-main { max-width: var(--ar-col); } }

/* body */
.ar-body > p, .ar-body li { font-size: clamp(17px, 1.15vw, 19px); line-height: 1.72; color: var(--body); }
.ar-body > p { margin: 0 0 1.15em; }
.ar-body > ul, .ar-body > ol:not(.sources):not(.ul94):not(.ar-steps) { margin: 0 0 1.2em; padding-left: 1.3em; }
.ar-body > ul > li + li, .ar-body > ol:not(.sources):not(.ul94):not(.ar-steps) > li + li { margin-top: .55em; }
.ar-body strong, .ar-body b { color: var(--text); font-weight: 560; }
.ip .ar-body h2 { margin: 2.1em 0 .75em; padding-top: 22px; border-top: 1px solid var(--rule); font-size: clamp(28px, 2.6vw, 42px); line-height: 1.08; }
.ip .ar-body h3 { margin: 1.6em 0 .5em; font-size: clamp(19px, 1.4vw, 23px); }
.ar-body a, .ar-related a.related-card .rc-title { transition: color .3s; }
.ar-body a:not(.btn):not(.more) { color: var(--text); border-bottom: 1px solid var(--ember); }
.ar-body a:not(.btn):hover { color: var(--ember-2); }
.ar-answer { margin: 0; padding: 26px 28px; background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--warm); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.55; font-weight: 300; color: var(--text); }
/* key takeaways: a card of its own (tinted panel, ember top rule, a clear label, every point on its own row) */
.ar-take { margin: 22px 0 8px; padding: 24px 28px 26px; background: var(--panel); border: 1px solid var(--rule); border-top: 2px solid var(--ember); }
.ar-take > .ip-k { color: var(--text); }
.ar-take ul { list-style: none; display: grid; gap: 0; margin: 14px 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.ar-take li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--line-2); font-size: 16.5px; line-height: 1.55; color: var(--body); }
.ar-take li:last-child { border-bottom: 0; padding-bottom: 0; }
.ar-take li::before { content: ''; width: 9px; height: 9px; margin: .55em 0 0 3px; border: 1.5px solid var(--ember); transform: rotate(45deg); }
.ar-take li b { color: var(--text); font-weight: 560; }
.ar-take li a { color: var(--text); border-bottom: 1px solid var(--ember); }

/* numbered steps: a ruled list with big mono numbers */
.ar-steps { list-style: none; counter-reset: arstep; margin: 22px 0 28px; padding: 0; border-top: 1px solid var(--rule); }
.ar-steps > li { counter-increment: arstep; position: relative; padding: 18px 0 18px 64px; border-bottom: 1px solid var(--line-2); }
.ar-steps > li::before { content: counter(arstep, decimal-leading-zero); position: absolute; left: 0; top: 18px; font-family: var(--f-m); font-size: 15px; letter-spacing: .08em; color: var(--ember); }
.ar-steps > li > b:first-child { display: block; margin-bottom: 4px; }

/* a quotation: a card with the speaker underneath */
.ar-body .ar-quote { margin: 26px 0 30px; padding: 26px 30px 22px; background: var(--panel); border: 1px solid var(--rule); border-left: 2px solid var(--warm); }
.ar-quote > p:first-child { margin: 0; font-family: var(--f-s); font-size: clamp(24px, 2.1vw, 32px); line-height: 1.22; color: var(--text); }
.ar-quote .ar-quote-by { margin: 14px 0 0; font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.ar-quote .ar-quote-by a { color: var(--body); }

/* FAQ: every question and answer visible, as cards */
.ar-faq { display: grid; gap: 12px; margin: 20px 0 10px; }
.ar-faq-i { padding: 22px 24px 20px; background: var(--panel); border: 1px solid var(--rule); }
.ip .ar-faq-i h3 { margin: 0 0 10px; font-size: clamp(19px, 1.35vw, 22px); line-height: 1.3; color: var(--text); }
.ar-faq-i p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--body); }

/* the kit, skinned */
.ar-toc .ak-toc__label, .ar-toc-m > summary { font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.ar-toc .ak-toc__list a { font-size: 14.5px; }
.ar-toc .ak-toc__top { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; }
.ak-toc--num .ak-toc__list a::before { font-family: var(--f-m); font-size: var(--fs-lab); }
.ak-toc__list a[aria-current="true"]::before { color: var(--ember); opacity: 1; }
.ar-toc-m { margin: 22px 0 8px; }
.ar-toc-m > summary { color: var(--text); }
.ar-toc-m .ak-toc-m__count { font-family: var(--f-m); }
.ar-card { margin-top: 30px; padding: 22px 22px 20px; background: var(--panel); border: 1px solid var(--rule); }
.ar-card > p:not(.ip-k) { margin: 12px 0 18px; font-size: 15px; line-height: 1.55; color: var(--body); }
.ar-card .btn { width: 100%; justify-content: space-between; }
.ar-card-sell { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--mute); border-bottom: 1px solid var(--line-2); transition: color .3s; }
.ar-card-sell:hover { color: var(--text); }
/* the side column on a laptop-height screen (25 Oct 2026 design re-check, 1440x900 and 2000x1060): the list plus the
   card were taller than the sticky column, so the whole column scrolled inside itself - the card was cut off at the
   bottom and, further down the page, the "On this page" label scrolled out of sight. Now the label, the progress rule,
   back to top and the card always stay whole; only the list scrolls (the kit keeps the current section in view), and
   on a short screen the card drops its line of text. The list's rule is drawn as a background so the current-section
   bar is not clipped by the scroll box. */
@media (min-width: 1100px) {
  .ar-aside .ak-aside__inner { display: flex; flex-direction: column; overflow: hidden; }
  .ar-aside .ar-toc { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
  .ar-aside .ar-toc > :not(.ak-toc__list) { flex: none; }
  .ar-aside .ak-toc__list { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
    border-left: 0; background: linear-gradient(var(--ak-rule), var(--ak-rule)) left top / 1px 100% no-repeat; }
  .ar-aside .ak-toc__list a { margin-left: 0; }
  .ar-aside .ar-card { flex: none; }
}
@media (min-width: 1100px) and (max-height: 1000px) {
  .ar-aside .ar-card { margin-top: 22px; padding: 18px 20px; }
  .ar-aside .ar-card > p:not(.ip-k) { display: none; }
  .ar-aside .ar-card .btn { margin-top: 14px; }
}
.ak-table { margin: 26px 0 30px; background: var(--panel); border: 1px solid var(--rule); }
.ak-table > table { font-size: 15.5px; }
.ak-table :is(th, td) { padding: 14px 16px; border-bottom: 1px solid var(--line-2); color: var(--body); line-height: 1.5; }
.ak-table thead :is(th, td) { background: var(--panel-2); border-bottom: 1px solid var(--rule); font-family: var(--f-m); font-size: var(--fs-lab); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ak-table tbody th { color: var(--text); font-weight: 560; }
.ak-table > table > caption { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); text-align: left; }
.ak-table + p.ak-table-hint { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }

/* the documents exhibit */
.dcards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 10px; }
.dcard { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--rule); }
.dpaper { position: relative; height: 230px; overflow: hidden; background: radial-gradient(80% 90% at 50% 100%, #1b1d21 0%, var(--panel) 70%); }
.sheet-mini { position: absolute; left: 50%; top: 30px; width: 196px; height: 250px; margin-left: -98px; padding: 16px 14px; display: flex; flex-direction: column; gap: 9px; background: var(--paper); color: var(--ink); transform: rotate(-3deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .8); transition: transform 1s var(--ease); }
.dcard:hover .sheet-mini { transform: rotate(-5deg) translateY(-6px); }
.sheet-mini .stamp { top: 128px; bottom: auto; right: 10px; }
.dcard.is-ready .stamp { color: var(--ink); border-color: var(--ink); }
.pfilm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 64px; margin-top: 6px; }
.pfilm i { background: #2b2822; }
.seal2 { width: 52px; height: 52px; margin-top: 18px; border-radius: 50%; border: 1.4px solid #8f7a52; box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7.4px #8f7a52; }
.dcard-b { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; }
.ip .dcard h3 { margin: 10px 0 8px; font-size: 22px; font-weight: 400; letter-spacing: -.02em; }
.dcard-b > p:not(.st) { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.dcard-b .more { margin-top: 14px; }
.dhow { margin: auto 0 0 !important; padding-top: 14px; font-size: 14.5px !important; color: var(--body); }
.dhow b { font-family: var(--f-m); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.dcard-b > p:not(.st):not(.dhow) { margin-bottom: 14px; }
.ak-table caption .nw { white-space: nowrap; }

/* the production film, played on a tap */
.ar-film { margin: 26px 0 30px; }
.ar-film .frame-in { aspect-ratio: 16 / 9; border: 1px solid var(--line-2); cursor: pointer; }
.ar-film .frame-in > video { opacity: 1; }
.ar-play { position: absolute; z-index: 3; left: 50%; top: 50%; display: grid; place-items: center; width: 84px; height: 84px; margin: -42px 0 0 -42px; padding: 0; border-radius: 50%; border: 1px solid rgba(236, 231, 222, .6); background: rgba(7, 8, 10, .55); cursor: pointer; transition: opacity .4s, transform .5s var(--ease), border-color .4s; }
.ar-play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--text); }
.ar-film:hover .ar-play { transform: scale(1.06); border-color: var(--ember); }
.ar-film.is-playing .ar-play { opacity: 0; }
.ar-play:focus-visible { opacity: 1; outline: 2px solid var(--ember); outline-offset: 6px; }

/* UL 94 scale, checklists, sources, related */
.ul94 { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 26px; padding: 0; border: 1px solid var(--rule); }
.ul94 li { padding: 16px; border-left: 1px solid var(--line-2); }
.ul94 li:first-child { border-left: 0; }
.ul94 li:nth-child(2) { background: rgba(236, 231, 222, .025); } .ul94 li:nth-child(3) { background: rgba(236, 231, 222, .05); } .ul94 li:nth-child(4) { background: rgba(236, 231, 222, .075); }
.ul94 b { display: block; font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variation-settings: 'wdth' 125; color: var(--text); }
.ul94 span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--body); }
.ar-body .checks { margin: 18px 0 8px; }
.ar-body .checks li { font-size: inherit; }
.checks.four { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
.sources { margin: 0; padding-left: 1.5em; }
.sources li { margin: 6px 0; font-size: 15px; color: var(--mute); }
.ar-body .sources a { color: var(--body); border-bottom-color: var(--line-2); overflow-wrap: anywhere; }
.ar-related { margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--rule); }
.rc-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.related-card { flex: 1 1 calc(50% - 6px); min-width: 240px; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--rule); transition: border-color .4s; }
.related-card:hover { border-color: rgba(236, 231, 222, .6); }
.rc-cat { font-family: var(--f-m); font-size: var(--fs-lab); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.rc-title { font-size: 18px; line-height: 1.3; color: var(--text); }
.related-card:hover .rc-title { color: var(--ember-2); }

@media (max-width: 760px) {
  .ak-table > table > caption, .ak-table--stack > table > caption { padding: 12px 16px; }
  .ar-hero .frame-in { aspect-ratio: 16 / 10; }
  .ar-answer { padding: 20px; }
  .ar-take { padding: 20px 20px 22px; }
  .ar-steps > li { padding-left: 48px; }
  .ar-body .ar-quote { padding: 20px 20px 18px; }
  .ar-faq-i { padding: 18px 18px 16px; }
  .dcards, .checks.four { grid-template-columns: 1fr; }
  .ul94 { grid-template-columns: 1fr 1fr; }
  .ul94 li:nth-child(3) { border-left: 0; }
  .ul94 li:nth-child(n+3) { border-top: 1px solid var(--line-2); }
}