/* edit office — the article pages.
   ────────────────────────────────────────────────────────────────────────────
   Two offer pages (/tiktok-music-promotion, /for-record-labels), the guides
   under /guides/ and their index. Loaded after eo.css by those pages only, and
   every rule sits under .ar (on <body>), so nothing here reaches another page.

   Front-office paper and ink, the same type roles as everywhere else: Archivo
   for headings, Inter for reading. No cards, no badges, no numbers that carry
   nothing. The offer pages set each heading in its own column beside the
   text, like an issued brief; the guides are a single reading column with a
   narrow contents list beside it on a wide screen and a disclosure above it on
   a narrow one. Everything is plain HTML and CSS: the pages read the same with
   no script and with reduced motion. */

.ar {
  --ar-col: 66ch;                         /* the reading measure, ~65 characters */
  --ar-text: rgba(23, 19, 12, 0.86);
  --ar-top: 96px;                         /* clears the sticky masthead for anchors */
}

/* ── Opening ────────────────────────────────────────────────────────────── */
.ar-head { padding: clamp(44px, 7vw, 96px) 0 clamp(28px, 4.4vw, 52px); }
.ar-crumb { font-size: 0.92rem; color: var(--mut); margin-bottom: clamp(14px, 2vw, 22px); }
.eo .ar-crumb a { border-bottom: 1px solid var(--rule-2); padding-bottom: 1px; }
.eo .ar-crumb a:hover { border-bottom-color: currentColor; color: var(--fg); }
.ar-h1 {
  font-family: var(--f-disp); font-weight: 900; color: var(--fg);
  font-size: clamp(min(2.3rem, 10.5vw), 5.4vw, 4.3rem); line-height: 0.98;
  overflow-wrap: break-word;
  letter-spacing: -0.03em; word-spacing: 0.04em;
  max-width: 17ch; text-wrap: balance;
}
.ar-intro { margin-top: clamp(20px, 3vw, 32px); max-width: 60ch; }
.ar-intro p { font-size: clamp(1.08rem, 1.45vw, 1.22rem); line-height: 1.6; color: var(--fg); }
.ar-intro p + p { margin-top: 0.85em; color: var(--ar-text); }

/* ── Reading text ───────────────────────────────────────────────────────── */
.ar-prose { max-width: var(--ar-col); font-size: 1.06rem; line-height: 1.72; color: var(--ar-text); }
.ar-prose p + p, .ar-prose p + .ar-formula, .ar-prose .ar-formula + p { margin-top: 1.05em; }
.ar-prose h2 {
  font-family: var(--f-disp); font-weight: 800; color: var(--fg);
  font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.12;
  letter-spacing: -0.02em; word-spacing: 0.04em; text-wrap: balance;
  margin: 2.3em 0 0.75em; scroll-margin-top: var(--ar-top);
}
.ar-prose h2:first-child { margin-top: 0; }
/* Scoped through .eo so it outranks `.eo a:not(.eo-btn) { text-decoration: none }`. */
.eo .ar-prose a:not(.eo-btn), .eo .ar-intro a:not(.eo-btn) {
  color: var(--fg); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 0.2em; text-decoration-color: var(--rule-2);
}
.eo .ar-prose a:not(.eo-btn):hover, .eo .ar-intro a:not(.eo-btn):hover { text-decoration-color: currentColor; }
/* The one formula in the cost guide: set apart, not boxed. */
.ar-formula {
  margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 2px solid var(--fg);
  font-family: var(--f-disp); font-weight: 700; font-size: 1.12rem; line-height: 1.4; color: var(--fg);
}

/* First call to action, straight after an offer page's introduction, with
   the one secondary way on beside it: the work. */
.ar-lead-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: clamp(24px, 3.4vw, 34px); }
.ar-prose .ar-lead-cta { margin-top: 1.6em; }
/* a.class, so it outranks `.eo a:not(.eo-btn) { text-decoration: none }`. */
.eo a.ar-lead-cta__more { color: var(--fg); font-size: 0.98rem; text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: var(--rule-2); }
.eo a.ar-lead-cta__more:hover { text-decoration-color: currentColor; }
/* Who publishes a guide and when, said once and quietly. */
.ar-byline { margin-top: clamp(14px, 2vw, 20px); color: var(--mut); font-size: 0.92rem; }

/* Subheadings, lists and tables inside the reading text. */
.ar-prose h3 { font-family: var(--f-disp); font-weight: 700; color: var(--fg); font-size: 1.12rem;
  line-height: 1.25; letter-spacing: -0.01em; margin: 1.7em 0 0.5em; }
.ar-prose h3:first-child { margin-top: 0; }
.ar-prose ul { list-style: none; margin-top: 0.6em; }
.ar-prose li { position: relative; padding-left: 1.2em; }
.ar-prose li + li { margin-top: 0.45em; }
.ar-prose li::before { content: ''; position: absolute; left: 0; top: 0.78em; width: 0.5em; height: 1px; background: var(--fg); }
.ar-prose p + ul, .ar-prose ul + p, .ar-prose ul + .ar-table, .ar-prose p + .ar-table, .ar-prose .ar-table + p { margin-top: 1.05em; }
/* A table wider than the column (large text, a narrow screen) scrolls inside
   its own box instead of being cut off by the page. */
.ar-table { margin: 1.4em 0; overflow-x: auto; }
.ar-table table { width: 100%; border-collapse: collapse; font-size: 0.98rem; line-height: 1.5; }
.ar-table caption { caption-side: top; text-align: left; color: var(--mut); font-size: 0.9rem; padding-bottom: 10px; }
.ar-table th, .ar-table td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule); }
.ar-table thead th { font-family: var(--f-disp); font-weight: 700; color: var(--fg); border-bottom: 1px solid var(--rule-2); }
.ar-table tbody th { font-family: var(--f-disp); font-weight: 700; color: var(--fg); width: 22%; }
.ar-table td { color: var(--ar-text); font-variant-numeric: tabular-nums; }
/* A table whose first column names the rows: on a narrow screen each row
   becomes a short labelled block, so nothing scrolls sideways. */
@media (max-width: 640px) {
  .ar-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ar-table--stack table, .ar-table--stack tbody, .ar-table--stack tr,
  .ar-table--stack th, .ar-table--stack td { display: block; width: auto; }
  .ar-table--stack tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .ar-table--stack caption { display: block; width: auto; }
  .ar-table--stack tbody th, .ar-table--stack td { border: 0; padding: 0; width: auto; }
  .ar-table--stack tbody th { margin-bottom: 8px; }
  .ar-table--stack td + td { margin-top: 10px; }
  .ar-table--stack td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--fg); font-size: 0.9rem; }
}

/* ── Offer pages: heading beside its text ───────────────────────────────── */
.ar-sec { border-top: 1px solid var(--rule); padding: clamp(34px, 5vw, 64px) 0; }
.ar-sec__h {
  font-family: var(--f-disp); font-weight: 800; color: var(--fg);
  font-size: clamp(1.45rem, 2.3vw, 1.85rem); line-height: 1.12;
  letter-spacing: -0.02em; word-spacing: 0.04em; text-wrap: balance;
  margin-bottom: 0.8em; scroll-margin-top: var(--ar-top);
}
@media (min-width: 960px) {
  .ar-sec__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    column-gap: clamp(32px, 4.5vw, 72px); align-items: start; }
  .ar-sec__h { margin-bottom: 0; max-width: 14ch; }
  .ar-sec__grid > .ar-prose:only-child { grid-column: 2; }
}

/* ── Guides: contents beside, or above, one column ──────────────────────── */
.ar-body { padding-bottom: clamp(56px, 8vw, 104px); }
.ar-toc__h, .ar-toc-m summary { font-family: var(--f-body); font-weight: 600; font-size: 0.86rem; color: var(--fg); }
.ar-toc ol, .ar-toc-m ol { list-style: none; }
.eo .ar-toc a, .eo .ar-toc-m a { display: block; color: var(--mut); font-size: 0.9rem; line-height: 1.38; padding: 6px 0; }
.eo .ar-toc a:hover, .eo .ar-toc-m a:hover { color: var(--fg); }
@media (min-width: 1080px) {
  .ar-body__grid { display: grid; grid-template-columns: 200px minmax(0, var(--ar-col));
    column-gap: clamp(44px, 5vw, 88px); align-items: start; }
  .ar-toc { position: sticky; top: var(--ar-top); padding-top: 4px; }
  .ar-toc__h { margin-bottom: 6px; }
  .ar-toc-m { display: none; }
}
@media (max-width: 1079px) {
  .ar-toc { display: none; }
  .ar-toc-m { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
    margin-bottom: clamp(30px, 5vw, 44px); max-width: var(--ar-col); }
  .ar-toc-m summary { cursor: pointer; padding: 13px 0; list-style: none;
    display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
  .ar-toc-m summary::-webkit-details-marker { display: none; }
  .ar-toc-m summary::after { content: '+'; font-weight: 400; font-size: 1.1rem; }
  .ar-toc-m[open] summary::after { content: '−'; }
  .ar-toc-m ol { padding-bottom: 12px; }
}

/* Sources: plain references at the end of a guide. */
.ar-sources { margin-top: 2.6em; padding-top: 1.3em; border-top: 1px solid var(--rule); font-size: 0.94rem; }
.ar-prose .ar-sources__h { font-size: 1.05rem; margin: 0 0 0.6em; letter-spacing: -0.01em; }
.ar-sources ul { list-style: none; }
.ar-sources li + li { margin-top: 0.45em; }
.ar-sources__note { margin-top: 0.9em; color: var(--mut); font-size: 0.9rem; }

/* ── Closing call to action: the article's own words, to the inquiry page ── */
.ar-cta { padding: clamp(52px, 8vw, 104px) 0; }
/* The measure is set in the link's own size, so it is ~22 of its characters. */
.ar-cta__line { font-size: clamp(min(1.75rem, 8.5vw), 3.8vw, 3rem); line-height: 1.06; max-width: 22ch; overflow-wrap: break-word; }
.eo .ar-cta__link {
  font-family: var(--f-disp); font-weight: 800; color: var(--fg);
  font-size: inherit; line-height: inherit;
  letter-spacing: -0.02em; word-spacing: 0.04em; text-wrap: balance;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em;
  text-decoration-color: var(--rule-2);
}
.eo .ar-cta__link:hover { text-decoration-color: currentColor; }
.ar-cta__link .eo-ar { display: inline-block; transition: transform 0.16s ease; }
.ar-cta__link:hover .eo-ar { transform: translateX(4px); }
.ar-cta__note { margin-top: 18px; color: var(--mut); font-size: 0.92rem; }

/* ── Read next / the service ────────────────────────────────────────────── */
.ar-next { padding: clamp(40px, 6vw, 72px) 0 clamp(52px, 8vw, 92px); }
.ar-next__h { font-family: var(--f-disp); font-weight: 700; font-size: 1.05rem; color: var(--fg); margin-bottom: 14px; }
.ar-next__list { list-style: none; border-top: 1px solid var(--rule-2); }
.ar-next__list li { border-bottom: 1px solid var(--rule); }
.eo .ar-next__a { display: grid; gap: 6px; padding: 20px 28px 20px 0; position: relative; }
.ar-next__a::after { content: '→'; position: absolute; right: 2px; top: 20px; transition: transform 0.16s ease; }
.ar-next__a:hover::after { transform: translateX(3px); }
.ar-next__t { font-family: var(--f-disp); font-weight: 700; font-size: clamp(1.1rem, 1.7vw, 1.3rem);
  line-height: 1.2; color: var(--fg); word-spacing: 0.03em; }
.ar-next__d { color: var(--mut); font-size: 0.95rem; line-height: 1.55; max-width: 70ch; }
.ar-next__a:hover .ar-next__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ── Guides index ───────────────────────────────────────────────────────── */
.ar-listwrap { padding-bottom: clamp(20px, 3vw, 36px); }
.ar-list { list-style: none; border-top: 2px solid var(--fg); }
.ar-list__i { border-bottom: 1px solid var(--rule); padding: clamp(26px, 3.6vw, 42px) 0; }
.ar-list__t { font-family: var(--f-disp); font-weight: 800; font-size: clamp(min(1.5rem, 8vw), 3vw, 2.3rem); overflow-wrap: break-word;
  line-height: 1.08; letter-spacing: -0.02em; word-spacing: 0.04em; max-width: 26ch; text-wrap: balance; }
.eo .ar-list__t a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.16em; }
.ar-list__d { margin-top: 12px; color: var(--ar-text); font-size: 1.04rem; line-height: 1.65; max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  .ar-cta__link .eo-ar, .ar-next__a::after { transition: none; }
}