/* ARTICLES  (guides/<slug>/index.html)
   ------------------------------------------------------------------
   One stylesheet for every article under /guides/. It is the print
   language of the landing pages (paper, ink rules, one mono label with
   a cobalt square, condensed Bricolage headlines, cobalt as the only
   accent) set for reading: one text column of about 66 characters, a
   generous line height, and a left margin (the "rail") that carries
   the section numbers and the labels of lists and tables.

   Every rule is scoped under body.art and every class is prefixed
   art-. The page wears <body class="lp art">: landing.css supplies the
   nav, the ink contact footer, the die-cut button, .lp-wrap, .lp-label,
   .lp-rule, .lp-more and .lp-actions; this sheet adds the article.

   Load order in <head>:
     styles.css?v=93, landing.css?v=1, guides-row.css?v=1, article.css?v=1

   No JavaScript, no scroll-triggered motion. The default CSS is the
   finished page; a short CSS-only entrance runs on the masthead when
   motion is allowed.

   ==================================================================
   COMPONENTS  (class names + minimal markup)
   ==================================================================

   PAGE SKELETON
     <body class="lp art">
       <a class="skip" href="#main">Skip to content</a>
       <div class="wipe" aria-hidden="true"></div>
       <div class="page">
         <header class="nav is-scrolled" id="nav">…as on the landing pages…</header>
         <main id="main">
           <article class="art-article">
             <header class="art-mast">…</header>
             <div class="lp-wrap art-layout">
               <nav class="art-toc">…</nav>             (optional)
               <div class="art-body">
                 <aside class="art-answer">…</aside>
                 <section class="art-sec">…</section>   (repeat)
                 <section class="art-sec art-sources">…</section>
               </div>
             </div>
             <section class="art-close">…</section>
           </article>
           <footer class="contact" id="contact">…as on the landing pages…</footer>
         </main>
       </div>
       <script src="../../main.js?v=52"></script>

   .art-mast     the masthead: breadcrumb, kicker, h1, standfirst, byline.
     <header class="art-mast"><div class="lp-wrap">
       <nav class="art-crumb" aria-label="Breadcrumb"><ol>
         <li><a href="/guides/">Guides</a></li>
         <li aria-current="page">Short article name</li>
       </ol></nav>
       <p class="lp-label">Guide<span class="lp-label__rule" aria-hidden="true"></span>
          <span class="lp-label__meta">Video pricing</span></p>      (meta optional, keep it short)
       <h1 class="art-title">Headline with a cobalt <em>last words</em></h1>
       <p class="art-standfirst">One paragraph.</p>
       <p class="art-byline">
         <span class="art-byline__who"><a href="../../about/" rel="author">Pamir Shakir</a></span>
         <span>Published <time datetime="2026-10-08">8 October 2026</time></span>
         <span>Sources checked <time datetime="2026-10-08">8 October 2026</time></span>
       </p>
     </div></header>

   .art-layout   the body grid (also wears .lp-wrap). Holds .art-toc and
                 .art-body. From 1240px the contents list sits in a right
                 column and stays in view; below that it is hidden.

   .art-toc      "In this guide": in-page links to the sections.
     <nav class="art-toc" aria-label="In this guide">
       <p class="art-toc__h">In this guide</p>
       <ol class="art-toc__list">
         <li><a href="#prices"><span aria-hidden="true">01</span>Published prices</a></li>
       </ol>
     </nav>

   .art-body     the reading column. From 1000px it is indented by the
                 rail; section numbers and row labels hang in the rail.

   .art-answer   the boxed short answer (3 to 5 sentences).
     <aside class="art-answer" aria-labelledby="answer-h">
       <h2 class="art-answer__h" id="answer-h">The short answer</h2>
       <p>…</p>
     </aside>

   .art-sec      one h2 section. Its direct children are spaced
                 automatically: p, ul, ol, .art-h3, .art-rows, .art-table,
                 .art-cap, .lp-rule, .art-fig. Do not add margins.
     <section class="art-sec" id="prices" aria-labelledby="prices-h">
       <p class="art-sec__no" aria-hidden="true">01</p>
       <h2 class="art-h2" id="prices-h">What the published prices say</h2>
       <p>Running copy with <a href="…">a link</a> and <strong>a strong lead-in.</strong></p>
       <h3 class="art-h3">A sub-head</h3>
       <ul><li>…</li></ul>          (cobalt square bullets)
       <ol><li>…</li></ol>          (mono numerals)
     </section>

   .art-ref      a source reference: a small cobalt number that jumps to
                 the matching entry of the sources list.
     <sup class="art-ref"><a href="#src-3" aria-label="Source 3">3</a></sup>

   .art-cap      a mono caption above .art-rows (tables use <caption>).
     <p class="art-cap">Published prices<span>Checked October 2026</span></p>

   .art-rows     a ruled list of label / text pairs. From 1000px the
                 label hangs in the rail and the text keeps the measure.
                 Default label: display type (a term to explain).
                 .art-rows--src: mono label (who published a figure).
     <dl class="art-rows art-rows--src">
       <div class="art-row"><dt>A Brussels agency</dt><dd>States that …</dd></div>
     </dl>

   .art-table    a ruled table. The first column hangs in the rail from
                 1000px. Below 1000px the rows stack and every cell prints
                 its column name from data-label. .art-table__num sets a
                 price in the display numerals.
     <table class="art-table">
       <caption>My prices<span>October 2026</span></caption>
       <thead><tr><th scope="col">What it is</th><th scope="col">Price</th>
         <th scope="col">What is included</th><th scope="col">Delivery</th></tr></thead>
       <tbody><tr>
         <th scope="row">Test video <span class="art-table__sub">One short video</span></th>
         <td data-label="Price"><span class="art-table__num">€500</span> + VAT, fixed</td>
         <td data-label="Included">…</td>
         <td data-label="Delivery">…</td>
       </tr></tbody>
     </table>

   .lp-rule      (from landing.css) the sourced box: one published rule or
                 example with its source line. Inside .art-sec it fills
                 the measure.
     <aside class="lp-rule">
       <p class="lp-rule__tag">Published example</p>
       <p class="lp-rule__text">…</p>
       <p class="lp-rule__src">Source: <a href="https://…" rel="noopener">…</a></p>
     </aside>

   .art-fig      optional figure: a real still from the work, with a
                 caption that says only what it is.
     <figure class="art-fig"><img src="…" alt="…" width="1600" height="900" loading="lazy" />
       <figcaption>Caption</figcaption></figure>

   .art-sources  the numbered sources list, the last .art-sec.
     <section class="art-sec art-sources" id="sources" aria-labelledby="sources-h">
       <p class="art-sec__no" aria-hidden="true">07</p>
       <h2 class="art-h2" id="sources-h">Sources</h2>
       <p class="art-sources__note">Checked on 8 October 2026.</p>
       <ol class="art-sources__list">
         <li id="src-1"><a href="https://…" rel="noopener">Publisher, document title (PDF)</a>. A note.</li>
       </ol>
     </section>

   .art-close    the closing band: one call to action and one link to the
                 relevant landing page.
     <section class="art-close" aria-labelledby="close-h"><div class="lp-wrap">
       <div class="art-close__card">
         <div class="art-close__body">
           <p class="art-close__tag">Next step</p>
           <h2 class="art-close__title" id="close-h">…</h2>
           <p class="art-close__text">…</p>
         </div>
         <p class="lp-actions art-close__actions">
           <a class="pill pill--solid pill--lg" href="../../book/?from=guide-slug">Book an intro call</a>
           <a class="lp-more" href="../../video-production-brussels/">Video production in Brussels</a>
         </p>
       </div>
     </div></section>

   NOTES FOR THE NEXT ARTICLE
   - Copy this page, keep the <head> script blocks and the footer as
     they are, change the slug in every ?from= link.
   - Section numbers are plain text in .art-sec__no (01, 02, …) and are
     repeated in the contents list. Keep the two in step by hand.
   - Sources: give every <li> an id (src-1, src-2, …) and point each
     .art-ref at it. A source that must stay unnamed is described in
     words and gets no link.
   - Wide content: a table or a .art-rows list already uses the rail.
     Nothing else should be wider than the text column.
   - Anchors: give sections an id; landing.css already clears the nav.
   - No CSS smooth scrolling on this site, ever (it breaks the homepage's
     scroll measurements). main.js already eases in-page links.
   ------------------------------------------------------------------ */

body.art {
  --art-p: var(--paper, #f0ece3);
  --art-i: var(--ink, #14110c);
  --art-c: var(--cobalt, #2b34ff);
  --art-stock: var(--lp-stock, #fbf8f2);
  --art-soft: var(--ink-soft, #3a342b);
  --art-mut: var(--lp-mut, #5f584d);                  /* 5.9:1 on paper */
  --art-rule: var(--lp-rule, rgba(20, 17, 12, 0.16)); /* hairline on paper */
  --art-e: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --art-navh: var(--lp-navh, 60px);
  --art-size: clamp(1.0625rem, 0.98rem + 0.36vw, 1.25rem);  /* 17px phone, 20px desktop */
  --art-measure: 40rem;                               /* the text column: about 66 characters */
  --art-rail: 0px;                                    /* the left margin; set from 1000px */
  --art-flow: clamp(17px, 1.5vw, 22px);               /* between blocks of copy */
  --art-sec: clamp(52px, 6vw, 88px);                  /* between sections */
}
@media (min-width: 1000px) {
  body.art { --art-rail: clamp(150px, 15vw, 224px); }
}

/* ================================================================
   MASTHEAD
   ================================================================ */
body.art .art-mast {
  padding: calc(var(--art-navh) + clamp(26px, 3.2vw, 48px)) 0 0;
}

/* breadcrumb: Guides / this article */
body.art .art-crumb ol {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-mut);
}
body.art .art-crumb li { display: flex; align-items: baseline; gap: 10px; flex: 0 0 auto; }
body.art .art-crumb li:last-child { flex: 0 1 auto; min-width: 0; }
body.art .art-crumb li + li::before { content: "/"; color: var(--art-mut); }
body.art .art-crumb a {
  display: inline-block;
  padding: 6px 0;
  color: var(--art-i);
  text-decoration: underline;
  text-decoration-color: var(--art-c);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s var(--art-e);
}
body.art .art-crumb a:hover { color: var(--art-c); }
body.art .art-crumb + .lp-label { margin-top: clamp(14px, 1.6vw, 22px); }
@media (max-width: 620px) {
  /* phones: a tighter set, so "Guides / article name" keeps one line where it can */
  body.art .art-crumb ol { gap: 0 8px; font-size: 0.64rem; letter-spacing: 0.08em; }
  body.art .art-crumb li { gap: 8px; }
}

body.art .art-title {
  margin: clamp(22px, 2.8vw, 40px) 0 0;
  max-width: 13.5em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(2.45rem, 5.5vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.034em;
  text-wrap: balance;
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1;
  color: var(--art-i);
}
body.art .art-title em { font-style: normal; color: var(--art-c); }

body.art .art-standfirst {
  max-width: 34em;
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  font-family: var(--font-display);
  font-weight: 430;
  font-size: clamp(1.18rem, 1.7vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: -0.004em;
  text-wrap: pretty;
  color: var(--art-i);
}

/* byline: one ruled mono line */
body.art .art-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px clamp(20px, 3.4vw, 52px);
  margin: clamp(26px, 3.2vw, 46px) 0 0;
  padding: 13px 0 12px;
  border-top: 1px solid var(--art-i);
  border-bottom: 1px solid var(--art-rule);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-mut);
}
body.art .art-byline__who { color: var(--art-i); }
body.art .art-byline a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--art-c);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s var(--art-e);
}
body.art .art-byline a:hover { color: var(--art-c); }

/* ================================================================
   LAYOUT: contents list + reading column
   ================================================================ */
body.art .art-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: clamp(30px, 3.8vw, 56px);
  padding-bottom: var(--art-sec);
}
body.art .art-body {
  min-width: 0;
  max-width: calc(var(--art-rail) + var(--art-measure));
  font-family: var(--font-display);
  font-weight: 430;
  font-size: var(--art-size);
  line-height: 1.66;
  letter-spacing: 0.002em;
  color: var(--art-soft);
}

/* contents list: hidden until there is a right column for it */
body.art .art-toc { display: none; }
@media (min-width: 1240px) {
  body.art .art-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    column-gap: clamp(32px, 4vw, 72px);
    align-items: start;
  }
  body.art .art-body { grid-column: 1; grid-row: 1; }
  body.art .art-toc {
    display: block;
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--art-navh) + 28px);
    border-top: 1px solid var(--art-i);
    border-bottom: 1px solid var(--art-i);
  }
}
body.art .art-toc__h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 14px 0 13px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--art-i);
}
body.art .art-toc__h::before {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  background: var(--art-c);
}
body.art .art-toc__list { margin: 0; padding: 0; list-style: none; }
body.art .art-toc__list li { border-top: 1px solid var(--art-rule); }
body.art .art-toc__list a {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: baseline;
  padding: 9px 0 8px;
  font-family: var(--font-display);
  font-weight: 520;
  font-stretch: 90%;
  font-size: 0.98rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--art-i);
  transition: color 0.2s var(--art-e);
}
body.art .art-toc__list a span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.12em;
  color: var(--art-mut);
  font-variant-numeric: tabular-nums;
}
body.art .art-toc__list a:hover,
body.art .art-toc__list a:focus-visible { color: var(--art-c); }

/* ================================================================
   THE SHORT ANSWER: a printed card at the head of the column
   ================================================================ */
body.art .art-answer {
  margin: 0 0 0 var(--art-rail);
  border: 1px solid var(--art-i);
  border-radius: 4px;
  background: var(--art-stock);
  color: var(--art-i);
}
body.art .art-answer__h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 15px clamp(16px, 1.8vw, 26px) 14px;
  border-bottom: 1px solid var(--art-i);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.art .art-answer__h::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--art-c);
}
body.art .art-answer p {
  margin: 0;
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 1.8vw, 26px) clamp(18px, 2vw, 26px);
  font-weight: 460;
  font-size: 1.04em;
  line-height: 1.56;
  text-wrap: pretty;
}
body.art .art-answer p + p { padding-top: 0; }

/* ================================================================
   SECTIONS: a hairline, a number in the rail, an h2, the copy
   ================================================================ */
body.art .art-sec {
  margin-top: var(--art-sec);
}
body.art .art-sec > * { margin-top: 0; margin-bottom: 0; }
body.art .art-sec > * + * { margin-top: var(--art-flow); }

/* the section number: on phones and tablets a label row with a hairline */
body.art .art-sec__no {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--art-i);
  font-variant-numeric: tabular-nums;
}
body.art .art-sec__no::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--art-c);
}
body.art .art-sec__no::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--art-rule);
}

body.art .art-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: clamp(1.9rem, 3.3vw, 2.8rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
  color: var(--art-i);
}
body.art .art-sec > .art-sec__no + .art-h2 { margin-top: clamp(16px, 2vw, 24px); }
body.art .art-sec > .art-h2 + * { margin-top: clamp(18px, 2vw, 28px); }

body.art .art-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 84%;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--art-i);
}
body.art .art-sec > * + .art-h3 { margin-top: calc(var(--art-flow) * 1.9); }
body.art .art-sec > .art-h3 + * { margin-top: calc(var(--art-flow) * 0.6); }

/* running copy */
body.art .art-sec p { text-wrap: pretty; }
body.art .art-sec strong { font-weight: 660; color: var(--art-i); }
body.art .art-body :is(p, li, dd, td) > a:not([class]),
body.art .art-sources__list a {
  color: var(--art-i);
  text-decoration: underline;
  text-decoration-color: var(--art-c);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s var(--art-e);
}
body.art .art-body :is(p, li, dd, td) > a:not([class]):hover,
body.art .art-sources__list a:hover { color: var(--art-c); }

/* lists in the copy: cobalt squares, or mono numerals */
body.art .art-sec > :where(ul, ol) {
  padding: 0;
  list-style: none;
}
body.art .art-sec > :where(ul, ol) > li + li { margin-top: 0.55em; }
body.art .art-sec > :where(ul) > li { position: relative; padding-left: 1.4em; }
body.art .art-sec > :where(ul) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 7px;
  height: 7px;
  background: var(--art-c);
}
body.art .art-sec > :where(ol) { counter-reset: art-li; }
/* the numeral is an inline box on the first line, so it shares the text
   baseline; the negative indent pulls it into the list's left padding */
body.art .art-sec > :where(ol) > li {
  counter-increment: art-li;
  padding-left: 2.6rem;
  text-indent: -2.6rem;
}
body.art .art-sec > :where(ol) > li::before {
  content: counter(art-li, decimal-leading-zero);
  display: inline-block;
  width: 2.6rem;
  text-indent: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--art-c);
  font-variant-numeric: tabular-nums;
}

/* a source reference in the copy */
body.art .art-ref {
  margin-left: 0;
  font-family: var(--font-mono);
  font-size: 0.6em;
  font-weight: 500;
  line-height: 0;
  letter-spacing: 0;
  vertical-align: super;
}
/* inline, not inline-block: an atomic box lets the line break just before
   the number, which then starts the next line alone. The padding is the
   tap area; the negative side margin keeps the number 0.12em from the
   text, as before. */
body.art .art-ref a {
  display: inline;
  padding: 0.55em 0.85em;
  margin: 0 -0.73em;
  color: var(--art-c);
  text-decoration: none;
}
body.art .art-ref a:hover,
body.art .art-ref a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
/* the focus ring hugs the number, not the whole tap area, so it does not
   cut through the letter before it */
body.art .art-ref a:focus-visible { outline-offset: calc(3px - 0.73em); }

/* the mono caption above a ruled list; a second span sits at the right */
body.art .art-cap,
body.art .art-table caption {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  color: var(--art-i);
}
body.art .art-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 18px; }
body.art :is(.art-cap, .art-table caption) span { color: var(--art-mut); }
body.art .art-table caption span { float: right; margin-left: 18px; }
body.art .art-sec > * + .art-cap { margin-top: calc(var(--art-flow) * 1.7); }
body.art .art-sec > .art-cap + * { margin-top: 10px; }

/* ================================================================
   ROWS: a ruled list of label / text pairs
   ================================================================ */
body.art .art-rows {
  border-top: 1px solid var(--art-i);
  border-bottom: 1px solid var(--art-i);
}
body.art .art-sec > * + .art-rows { margin-top: calc(var(--art-flow) * 1.5); }
body.art .art-sec > .art-cap + .art-rows { margin-top: 10px; }
body.art .art-sec > :is(.art-rows, .art-table, .lp-rule, .art-fig) + * { margin-top: calc(var(--art-flow) * 1.5); }
body.art .art-row {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  column-gap: 22px;
  align-items: baseline;
  padding: 0.78em 0 0.72em;
}
body.art .art-row + .art-row { border-top: 1px solid var(--art-rule); }
body.art .art-row dt {
  font-family: var(--font-display);
  font-weight: 720;
  font-stretch: 86%;
  font-size: 1.02em;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--art-i);
  text-wrap: balance;
}
body.art .art-row dd {
  margin: 0;
  font-size: 0.94em;
  line-height: 1.58;
  text-wrap: pretty;
}
body.art .art-rows--src .art-row dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-stretch: normal;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--art-mut);
  text-wrap: pretty;
}
@media (max-width: 620px) {
  body.art .art-row { grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 0.85em 0 0.8em; }
}

/* ================================================================
   TABLE: ruled, first column in the rail, stacks on phones
   ================================================================ */
body.art .art-table {
  width: 100%;
  border-collapse: collapse;
  border-bottom: 1px solid var(--art-i);
  font-variant-numeric: lining-nums tabular-nums;
  text-align: left;
}
body.art .art-sec > * + .art-table { margin-top: calc(var(--art-flow) * 1.7); }
body.art .art-table caption { caption-side: top; padding: 0 0 10px; }
body.art .art-table :is(th, td) {
  padding: 0.85em 20px 0.8em 0;
  vertical-align: top;
  font-weight: inherit;
}
body.art .art-table :is(th, td):last-child { padding-right: 0; }
body.art .art-table thead th {
  padding-top: 12px;
  padding-bottom: 11px;
  border-top: 1px solid var(--art-i);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-mut);
}
body.art .art-table tbody tr { border-top: 1px solid var(--art-rule); }
body.art .art-table tbody tr:first-child { border-top-color: var(--art-i); }
body.art .art-table tbody th {
  font-family: var(--font-display);
  font-weight: 720;
  font-stretch: 86%;
  font-size: 1.02em;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--art-i);
}
body.art .art-table__sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-stretch: normal;
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--art-mut);
}
body.art .art-table td {
  font-size: 0.86em;
  line-height: 1.5;
  text-wrap: pretty;
}
body.art .art-table__num {
  display: block;
  margin: -0.06em 0 4px;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: 2.05em;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--art-i);
  white-space: nowrap;
}
@media (min-width: 1000px) {
  body.art .art-table { table-layout: fixed; }
  body.art .art-table thead th:nth-child(2) { width: 9.6rem; }
  body.art .art-table thead th:nth-child(4) { width: 12.4rem; }
}
@media (max-width: 999px) {
  /* rows stack; each cell prints its own column name */
  body.art .art-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.art .art-table,
  body.art .art-table :is(caption, tbody, tr, th, td) { display: block; }
  body.art .art-table tbody { border-top: 1px solid var(--art-i); }
  body.art .art-table tbody tr { padding: 16px 0 14px; }
  body.art .art-table tbody tr:first-child { border-top: 0; }
  body.art .art-table :is(th, td) { padding: 0; }
  body.art .art-table tbody th { font-size: 1.12em; }
  body.art .art-table td {
    position: relative;
    margin-top: 10px;
    padding-left: 6.4rem;
    font-size: 0.92em;
  }
  body.art .art-table td[data-label]::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 0.42em;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--art-mut);
  }
  body.art .art-table__num { font-size: 1.9em; margin-top: 0; }
}

/* ================================================================
   SOURCED BOX (.lp-rule from landing.css) and FIGURE, inside a section
   ================================================================ */
body.art .art-sec > .lp-rule { max-width: none; }
body.art .art-sec > * + .lp-rule { margin-top: calc(var(--art-flow) * 1.3); }
body.art .art-sec > .lp-rule + .lp-rule { margin-top: 14px; }
body.art .art-sec .lp-rule__tag { line-height: 1.45; }
body.art .art-sec .lp-rule__text { font-size: 0.9em; line-height: 1.56; }

body.art .art-fig { margin-left: 0; margin-right: 0; }
body.art .art-fig img { width: 100%; height: auto; border-radius: 2px; background: var(--art-i); }
body.art .art-fig figcaption {
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--art-mut);
}

/* ================================================================
   SOURCES: the numbered list that closes the article
   ================================================================ */
body.art .art-sources__note {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--art-mut);
}
body.art .art-sources__list {
  padding: 0;
  list-style: none;
  counter-reset: art-src;
  border-top: 1px solid var(--art-i);
  border-bottom: 1px solid var(--art-i);
}
body.art .art-sources__list li {
  counter-increment: art-src;
  padding: 0.72em 0 0.68em 2.9rem;
  text-indent: -2.9rem;
  font-size: 0.88em;
  line-height: 1.52;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
body.art .art-sources__list li + li { border-top: 1px solid var(--art-rule); }
body.art .art-sources__list li::before {
  content: counter(art-src, decimal-leading-zero);
  display: inline-block;
  width: 2.9rem;
  text-indent: 0;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--art-c);
  font-variant-numeric: tabular-nums;
}
/* arriving on a direct #src-N link: the entry is marked with a cobalt edge.
   (main.js scrolls in-page clicks itself and does not set :target.) */
body.art .art-sources__list li:target { box-shadow: inset 3px 0 0 var(--art-c); padding-left: calc(2.9rem + 14px); }

/* ================================================================
   THE RAIL (from 1000px): numbers and labels hang left of the column
   ================================================================ */
@media (min-width: 1000px) {
  body.art .art-sec {
    display: grid;
    grid-template-columns: var(--art-rail) minmax(0, 1fr);
    padding-top: clamp(22px, 2.4vw, 32px);
    border-top: 1px solid var(--art-rule);
  }
  body.art .art-sec > * { grid-column: 2; min-width: 0; }
  body.art .art-sec > .art-sec__no {
    grid-column: 1;
    grid-row: 1;
    align-self: first baseline;
    padding-right: 20px;
  }
  body.art .art-sec > .art-sec__no::after { content: none; }
  body.art .art-sec > .art-sec__no + .art-h2 { margin-top: 0; align-self: first baseline; }

  /* ruled lists and tables start at the rail; their text keeps the measure */
  body.art .art-sec > :is(.art-rows, .art-table, .art-cap) { grid-column: 1 / -1; }
  body.art .art-row { grid-template-columns: var(--art-rail) minmax(0, 1fr); column-gap: 0; }
  body.art .art-row dt { padding-right: 22px; }
  body.art .art-table th:first-child { width: var(--art-rail); }
}

/* ================================================================
   CLOSING BAND: one call to action, one link to the landing page
   ================================================================ */
body.art .art-close { padding: 0 0 var(--lp-sec, clamp(72px, 8vw, 124px)); }
body.art .art-close__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(22px, 3vw, 40px);
  padding: clamp(22px, 3.2vw, 46px);
  border: 1px solid var(--art-i);
  border-radius: 4px;
  background: var(--art-stock);
  color: var(--art-i);
}
body.art .art-close__tag {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
body.art .art-close__tag::before {
  content: "";
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background: var(--art-c);
}
body.art .art-close__title {
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 14em;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(2rem, 4.2vw, 3.7rem);
  line-height: 0.92;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
body.art .art-close__text {
  max-width: 46ch;
  margin: clamp(14px, 1.6vw, 20px) 0 0;
  font-family: var(--font-display);
  font-weight: 430;
  font-size: clamp(1.05rem, 1.35vw, 1.25rem);
  line-height: 1.48;
  text-wrap: pretty;
  color: var(--art-soft);
}
body.art .art-close__actions { margin: 0; }
@media (min-width: 900px) {
  body.art .art-close__card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: clamp(32px, 5vw, 80px);
  }
  body.art .art-close__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 4px;
  }
}

/* ================================================================
   ENTRANCE: CSS only, motion allowed only, masthead only
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  body.art .art-mast .lp-label { animation: art-fade 0.6s var(--art-e) both; }
  body.art .art-mast .lp-label__rule { transform-origin: left center; animation: art-draw 1s cubic-bezier(0.65, 0, 0.2, 1) 0.1s both; }
  body.art .art-title { animation: art-rise 0.9s var(--art-e) 0.05s both; }
  body.art .art-standfirst { animation: art-rise 0.9s var(--art-e) 0.13s both; }
  body.art .art-byline { animation: art-fade 0.9s var(--art-e) 0.24s both; }
}
@keyframes art-fade { from { opacity: 0; } }
@keyframes art-draw { from { transform: scaleX(0); } }
@keyframes art-rise { from { opacity: 0; transform: translateY(16px); } }

@media (prefers-reduced-motion: reduce) {
  body.art :is(.art-crumb a, .art-byline a, .art-toc__list a, .art-sources__list a),
  body.art .art-body a { transition: none; }
}

@media print {
  body.art .art-toc, body.art .art-close { display: none; }
  body.art .art-sec { break-inside: avoid-page; }
}