/* DealArena marketing: one resource article (/resources/<slug>).
   Ported from designs/Resource Article.dc.html. One design serves every slug,
   so everything here is type, rhythm and chrome; the words are the article's.

   Rides on marketing-shell.css tokens, which flip wholesale under
   body[data-theme="dark"], so both themes come free as long as nothing here
   hardcodes a neutral. The three values that do NOT flip are the brand ones,
   and they are declared once at the top as page-local vars.

   Namespaced under .p-resource-article so nothing leaks into the shared shell.
   The .ra-* hooks are the ones the page already shipped with; they are kept
   deliberately, because the geometry changed and the markup contract did not. */

.p-resource-article {
  /* Onest + DM Mono are the redesign's two faces. The marketing base loads
     Inter / Space Grotesk / JetBrains Mono for the shared chrome, so this page
     brings its own pair in via a link in extra_head and names them here rather
     than reaching for --sans / --mono, which point at the old pair. */
  --ra-sans: 'Onest', system-ui, sans-serif;
  --ra-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Brand orange is theme-independent by decree. --ra-brand-2 is the small-text
     shade: it needs the darker orange on cream and the brighter one on ink. */
  --ra-brand: #ef5920;
  --ra-brand-2: #c4471a;
  --ra-on-brand: #201009;
  --ra-edge: #a83a12;

  font-family: var(--ra-sans);
  color: var(--ink);
}
body[data-theme="dark"] .p-resource-article { --ra-brand-2: #ef5920; }

/* ---- reading progress ---------------------------------------------------
   Fixed rather than sticky: the bar has to hold its place while the article
   scrolls under it, and a sticky element can only stick inside its own
   container. Below 560px it sits exactly under the 56px mobile bar, which is
   where the design puts it and the one height on this site that is fixed. Above
   that the desktop nav's height moves with its own padding, so the bar rides
   the very top edge instead of guessing a number. Decorative: the same
   information is in the scrollbar, so it is aria-hidden in the markup. */
.p-resource-article .ra-progress {
  position: fixed; left: 0; right: 0; top: 0; height: 3px;
  z-index: 120; background: var(--bg-3); pointer-events: none;
}
.p-resource-article .ra-progress-fill {
  display: block; width: 0; height: 100%;
  background: var(--ra-brand);
  transition: width 90ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .p-resource-article .ra-progress-fill { transition: none; }
}

/* ---- the column --------------------------------------------------------- */
.p-resource-article .ra-wrap {
  max-width: 720px; margin: 0 auto; padding: 44px 20px 72px;
}

.p-resource-article .ra-back {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--ra-mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink-3); text-decoration: none;
  transition: color .15s;
}
.p-resource-article .ra-back:hover { color: var(--ra-brand-2); }

.p-resource-article .ra-h1 {
  font-family: var(--ra-sans); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 46px);
  line-height: 1.12; letter-spacing: -.03em;
  margin: 8px 0 0; color: var(--ink); text-wrap: balance;
}

.p-resource-article .ra-meta {
  font-family: var(--ra-mono); font-size: 11.5px;
  color: var(--ink-3); margin: 14px 0 0;
}

/* ---- the article body ---------------------------------------------------
   Everything under .ra-body is authored elsewhere: markdown from
   content/resources, or sanitised content:encoded off the Substack feed. It
   can contain anything the sanitiser did not strip, so the selectors are broad
   on purpose rather than matched to one article's shape. */
.p-resource-article .ra-body {
  margin-top: 22px;
  font-size: 16.5px; line-height: 1.78; color: var(--ink-2);
}
.p-resource-article .ra-body > :first-child { margin-top: 0; }
.p-resource-article .ra-body p { margin: 0 0 20px; }
.p-resource-article .ra-body h2 {
  font-size: 22px; line-height: 1.25; letter-spacing: -.02em; font-weight: 700;
  color: var(--ink); margin: 30px 0 12px;
}
.p-resource-article .ra-body h3 {
  font-size: 18.5px; line-height: 1.3; letter-spacing: -.015em; font-weight: 700;
  color: var(--ink); margin: 26px 0 10px;
}
.p-resource-article .ra-body h4 {
  font-size: 16px; line-height: 1.35; font-weight: 700;
  color: var(--ink); margin: 22px 0 8px;
}
.p-resource-article .ra-body strong, .p-resource-article .ra-body b { color: var(--ink); font-weight: 600; }
.p-resource-article .ra-body a { color: var(--ra-brand-2); text-decoration: none; }
.p-resource-article .ra-body a:hover { text-decoration: underline; }
.p-resource-article .ra-body ul,
.p-resource-article .ra-body ol {
  margin: 0 0 20px; padding-left: 20px; font-size: 16px; line-height: 1.75;
}
.p-resource-article .ra-body li { margin-bottom: 10px; }
.p-resource-article .ra-body blockquote {
  margin: 24px 0; padding: 4px 0 4px 16px;
  border-left: 3px solid rgba(239, 89, 32, .55);
  font-size: 16.5px; line-height: 1.7; color: var(--ink-2);
}
.p-resource-article .ra-body blockquote p:last-child { margin-bottom: 0; }
.p-resource-article .ra-body img,
.p-resource-article .ra-body video {
  display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 8px 0 20px;
}
.p-resource-article .ra-body figure { margin: 0 0 20px; }
.p-resource-article .ra-body figcaption {
  font-family: var(--ra-mono); font-size: 11.5px; color: var(--ink-3); margin-top: 8px;
}
.p-resource-article .ra-body hr {
  border: 0; border-top: 1px solid var(--line); margin: 30px 0;
}
.p-resource-article .ra-body code {
  font-family: var(--ra-mono); font-size: 13.5px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px;
}
.p-resource-article .ra-body pre {
  overflow-x: auto; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-family: var(--ra-mono); font-size: 13.5px; line-height: 1.6;
  margin: 0 0 20px;
}
.p-resource-article .ra-body pre code { background: none; border: 0; padding: 0; font-size: inherit; }
/* Wide content scrolls inside its own box instead of pushing the page
   sideways. display:block is what gives a <table> a scroll container without a
   wrapper element we do not control the markup of. */
.p-resource-article .ra-body table {
  display: block; max-width: 100%; overflow-x: auto;
  font-size: 14.5px; margin: 0 0 20px;
}

/* ---- syndication note --------------------------------------------------- */
.p-resource-article .ra-src {
  margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-3);
}
.p-resource-article .ra-src a { color: var(--ra-brand-2); text-decoration: none; }
.p-resource-article .ra-src a:hover { text-decoration: underline; }

/* ---- newsletter plate ---------------------------------------------------
   Same copy and the same [data-newsletter-form] contract the footer uses, so
   base_marketing's one binder picks it up and it posts to the real endpoint. */
.p-resource-article .ra-news {
  margin-top: 24px; padding: 18px 16px;
  border: 1px solid var(--line); border-radius: 15px; background: var(--bg-1);
}
.p-resource-article .ra-news-kicker {
  font-family: var(--ra-mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ra-brand-2);
}
.p-resource-article .ra-news p {
  font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 10px 0 14px;
}
.p-resource-article .ra-news-form { display: flex; gap: 8px; }
.p-resource-article .ra-news-form input {
  flex: 1; min-width: 0; height: 48px; padding: 0 14px;
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg-1); color: var(--ink);
  font-family: var(--ra-sans);
  /* 16px, not smaller: iOS zooms the page on focus below that. */
  font-size: 16px; outline: none;
}
.p-resource-article .ra-news-form input::placeholder { color: var(--ink-4); }
.p-resource-article .ra-news-form input:focus { border-color: var(--ra-brand); }
/* Console button plate: 10px radius, a 4px darker bottom edge that collapses
   under a 3px press. Label ink is #201009 on orange, never white. */
.p-resource-article .ra-news-form button {
  width: 48px; height: 48px; flex: none;
  border: 0; border-radius: 10px;
  background: var(--ra-brand); color: var(--ra-on-brand);
  font-family: var(--ra-mono); font-size: 17px; line-height: 1;
  cursor: pointer; box-shadow: 0 4px 0 var(--ra-edge);
  transition: transform .08s, box-shadow .08s;
}
.p-resource-article .ra-news-form button:active {
  transform: translateY(3px); box-shadow: 0 1px 0 var(--ra-edge);
}
.p-resource-article .ra-news-form button:disabled { cursor: default; opacity: .75; }

/* ---- prev / next --------------------------------------------------------
   A column of plates on a phone, two side by side once there is room. The .nxt
   hook keeps the older article right-aligned in both, which is what makes the
   pair read as a spread rather than a list. */
.p-resource-article .ra-pager {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.p-resource-article .ra-pager a {
  display: block; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.p-resource-article .ra-pager a:hover {
  border-color: var(--ra-brand); transform: translateY(-1px);
}
.p-resource-article .ra-pager .lab {
  display: block; font-family: var(--ra-mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 5px;
}
.p-resource-article .ra-pager .ttl { font-size: 15px; color: var(--ink); }
/* Right-aligned in both layouts, but the auto margin is row-only: in the phone
   column an auto cross-axis margin cancels the default stretch and the older
   plate would come out narrower than the newer one. */
.p-resource-article .ra-pager .nxt { text-align: right; }

@media (min-width: 720px) {
  .p-resource-article .ra-pager { flex-direction: row; }
  /* Half the row each, so a lone neighbour keeps its side of the spread rather
     than stretching across the whole width. */
  .p-resource-article .ra-pager a { flex: 0 1 calc(50% - 5px); min-width: 0; }
  .p-resource-article .ra-pager .nxt { margin-left: auto; }
}

/* ---- phone --------------------------------------------------------------
   Below 560px the mobile chrome takes over the page, so the bar's 56px is a
   real number here and the progress rule can sit under it exactly as designed.
   z-index stays below the bar's 60 so an open sheet covers it. */
@media (max-width: 559.98px) {
  .p-resource-article .ra-progress { top: 56px; z-index: 55; }
  .p-resource-article .ra-wrap { padding: 18px 18px 52px; }
  .p-resource-article .ra-h1 { font-size: 32px; }
}