/** Shopify CDN: Minification failed

Line 764:51 Unexpected bad string token
Line 764:72 Unterminated string token

**/
/* Orsa · Article v2
   (lives in section-orsa-article-split.css in this theme)

   Tokens from assets/orsa-base.css. Type: Figma Title 02 (H1),
   Text 04 (body), Text 06 (meta / captions / tiles). Square corners.

   Colour: the whole article runs on --orsa-ink (brown). --orsa-red is
   still defined but no longer referenced — swap any single
   var(--orsa-ink) back to var(--orsa-red) to bring red back to that
   one element.

   Site's 20px gutters, same top spacing as .orsa-shop__wrap. Content is
   capped by --orsa-measure (the "Content max width" setting) and centred.

   Breadcrumb type is NOT restated here — the markup uses
   .orsa-nav__crumbs / .orsa-nav__crumb / .orsa-nav__crumbCurrent /
   .orsa-nav__sepIcon from section-orsa-nav.css, so the article and the
   shop page can never drift apart.
*/

.orsa-article{
  --orsa-red:#D93A19;
  --orsa-ink:#7A3A22;
  --orsa-head: var(--orsa-ink);   /* headings */
  --orsa-bg:#FFFAEE;
  --orsa-nav-h: 60px;
  --orsa-bar-h: 48px;
  --orsa-margin: 20px;

  --orsa-rule: rgba(122, 58, 34, 0.28);
  --orsa-rule-soft: rgba(122, 58, 34, 0.16);
  --orsa-tint: rgba(122, 58, 34, 0.06);
  --orsa-tint-2: rgba(122, 58, 34, 0.12);

  color: var(--orsa-ink);
  background: var(--orsa-bg);

  /* same top spacing as .orsa-shop__wrap: nav + safe area.
     The crumb row below stands in for the shop's 48px subrow, so the
     title lands at exactly the same offset as shop content. */
  padding-top: calc(var(--orsa-nav-h) + env(safe-area-inset-top, 0px));
}

@media (min-width: 750px){
  .orsa-article{ --orsa-nav-h: var(--orsa-menu-h-desktop); }
}
@media (max-width: 749px){
  .orsa-article{ --orsa-nav-h: var(--orsa-menu-h-mobile); }
}

.orsa-article *,
.orsa-article *::before,
.orsa-article *::after{ box-sizing: border-box; }

.orsa-article a{ color: var(--orsa-ink); }

.orsa-article :is(a, button, summary):focus-visible{
  outline: 2px solid var(--orsa-ink);
  outline-offset: 3px;
}

/* ===== grid ===== */

.orsa-article__grid{
  max-width: 1920px;
  margin: 0 auto;
  padding-left: var(--orsa-margin);
  padding-right: var(--orsa-margin);

  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--orsa-gap);
}

/* one measure for the whole article; --orsa-measure comes from the section
   setting, or 'none' for edge-to-edge */
.orsa-article__col,
.orsa-article__relatedHead,
.orsa-article__tiles{
  grid-column: 1 / -1;
  min-width: 0;
  max-width: var(--orsa-measure, none);
  margin-inline: auto;
  width: 100%;
}

/* ===== Text 06 — meta, captions, labels, tiles ===== */

.orsa-article__back,
.orsa-article__barMeta,
.orsa-article__label,
.orsa-article__heroCap,
.orsa-article__jump ol,
.orsa-article__pill,
.orsa-article__faq summary{
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 13px;
  line-height: 0.99;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

/* ===== crumb row — trail left, meta right ===== */

.orsa-article__bar{
  min-height: var(--orsa-bar-h);
  padding: 12px var(--orsa-margin);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background: var(--orsa-bg);
  color: var(--orsa-red);
  border-bottom: 1px solid var(--orsa-red);
}
/* crumb links stay red — beats the .orsa-article a rule above */
.orsa-article__bar a{ color: var(--orsa-red); }

.orsa-article__crumbTitle{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 42ch;
  opacity: 0.62;
}

.orsa-article__barMeta{
  display: inline-flex;
  align-items: baseline;
  gap: 20px;
  white-space: nowrap;
  opacity: 0.62;
  flex: none;
}

@media (max-width: 749px){
  .orsa-article__bar{
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .orsa-article__bar .orsa-nav__crumbs{ max-width: 100%; }
  .orsa-article__barMeta{
    flex-wrap: wrap;
    white-space: normal;
    gap: 6px 16px;
  }
}

/* ===== head ===== */

.orsa-article__head{ padding-top: var(--orsa-pad-top); }

.orsa-article__top{ padding-bottom: 28px; }

.orsa-article__back{
  color: var(--orsa-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.orsa-article__backArrow{
  font-size: 13px;
  line-height: 1;
  transform: translateY(1px);
}

/* ===== ORSA Back link wiggle (SNAP like nav/footer) ===== */
.orsa-article__backText{
  display: inline-block;
  transform-origin: 50% 60%;
  will-change: transform;
  transition: none !important;
}

@keyframes orsaArticleBackWiggle{
  0%       { transform: rotate(1.5deg); }
  49.999%  { transform: rotate(1.5deg); }
  50%      { transform: rotate(-1.5deg); }
  99.999%  { transform: rotate(-1.5deg); }
  100%     { transform: rotate(1.5deg); }
}

@media (hover:hover) and (pointer:fine){
  .orsa-article__back:hover .orsa-article__backText,
  .orsa-article__back:focus-visible .orsa-article__backText{
    animation: orsaArticleBackWiggle 400ms linear infinite;
  }
}
@media (max-width: 989px){
  .orsa-article__back:active .orsa-article__backText{
    animation: orsaArticleBackWiggle 400ms linear infinite;
  }
}
@media (prefers-reduced-motion: reduce){
  .orsa-article__backText{
    animation: none !important;
    transform: none !important;
  }
}

/* Title 02 */
.orsa-article__title{
  margin: 0 auto !important;

  font-family: "AlteHaasGrotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(33px, 4.2vw, 62px);
  line-height: 0.86;
  letter-spacing: -0.06em;
  text-transform: none;

  color: var(--orsa-head);
  text-wrap: balance;
}

.orsa-article__deck{ margin: 28px auto 0; }
.orsa-article__deck p{ margin: 0 0 12px; }
.orsa-article__deck p:last-child{ margin-bottom: 0; }

/* ===== TOC rail — own line, after the intro ===== */

.orsa-article__railRow{ margin-top: 36px; }

.orsa-article__railWrap .orsa-article__label{ opacity: 0.62; margin-bottom: 12px; }

.orsa-article__rail{ position: relative; min-width: 0; }

.orsa-article__tocScroll{
  display: flex;
  gap: 6px;

  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;

  padding: 2px 0 10px;

  /* hairline rail: just enough to say "this moves" */
  scrollbar-width: thin;
  scrollbar-color: rgba(122, 58, 34, 0.38) transparent;
}
.orsa-article__tocScroll::-webkit-scrollbar{
  height: 2px;
  -webkit-appearance: none;
}
.orsa-article__tocScroll::-webkit-scrollbar-button{
  display: none;
  width: 0;
  height: 0;
}
.orsa-article__tocScroll::-webkit-scrollbar-track{
  background: rgba(122, 58, 34, 0.10);
  border-radius: 0;
}
.orsa-article__tocScroll::-webkit-scrollbar-thumb{
  background: rgba(122, 58, 34, 0.38);
  border-radius: 0;
}
.orsa-article__tocScroll:hover::-webkit-scrollbar-thumb{
  background: rgba(122, 58, 34, 1);
}

.orsa-article__pill{
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  text-decoration: none;

  padding: 8px 12px;
  border: 1px solid var(--orsa-rule);
  border-radius: 0;
  color: var(--orsa-ink);

  transition: background-color 120ms linear, color 120ms linear, border-color 120ms linear;
}
.orsa-article__pill:hover,
.orsa-article__pill:focus-visible{
  background: var(--orsa-ink);
  border-color: var(--orsa-ink);
  color: var(--orsa-bg);
}
.orsa-article__pill i{ font-style: normal; opacity: 0.5; }
.orsa-article__pill:hover i{ opacity: 0.75; }

/* ===== hero media ===== */

.orsa-article__hero{ margin: 36px auto 0; }

/* fixed ratio: fills the width and crops */
.orsa-article__heroFrame{
  position: relative;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: var(--orsa-hero-ratio, 1.5);
  max-height: 82svh;
  overflow: hidden;
  border-radius: 0;
  background: rgba(122, 58, 34, 0.06);
}
.orsa-article__heroFrame img{
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  margin-inline: auto;
  object-fit: cover;
  object-position: center;
}

.orsa-article__heroCap{
  margin-top: 8px;
  opacity: 0.62;
}

/* "Original shape, centred": the photo keeps its own ratio — portrait or
   landscape — never crops, and sits in the middle of the row. */
.orsa-article__hero--natural .orsa-article__heroFrame{
  aspect-ratio: auto;
  max-height: none;
  background: transparent;

  display: flex;
  justify-content: center;
  align-items: center;
}
.orsa-article__hero--natural .orsa-article__heroFrame img{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(78svh, var(--orsa-hero-max, 720px));
  object-fit: contain;
}
.orsa-article__hero--natural .orsa-article__heroCap{ text-align: center; }

/* ===== jump list + takeaways ===== */

.orsa-article__spread{ margin-top: 44px; }
.orsa-article__box{ margin-top: 32px; }

.orsa-article__label{
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--orsa-ink);
  color: var(--orsa-ink);
}
.orsa-article__label--plain{
  border-bottom: 0;
  padding-bottom: 0;
}

.orsa-article__jump ol{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: orsajump;
}
.orsa-article__jump li{
  counter-increment: orsajump;
  margin: 0;
  border-bottom: 1px solid var(--orsa-rule-soft);
}
.orsa-article__jump a{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  text-decoration: none;
  color: var(--orsa-ink);
}
.orsa-article__jump a::before{
  content: counter(orsajump, decimal-leading-zero);
  opacity: 0.5;
}
.orsa-article__jump a::after{
  content: "↓";
  margin-left: auto;
  opacity: 0.5;
}
.orsa-article__jump a:hover{ background: var(--orsa-tint); }
.orsa-article__jump a:hover::after{ opacity: 1; }

.orsa-article__boxBody{
  border-bottom: 1px solid var(--orsa-rule-soft);
  padding: 14px 0 18px;
}
.orsa-article__boxBody ul{ margin: 0; padding-left: 18px; }
.orsa-article__boxBody li{ margin: 0 0 10px 0; }
.orsa-article__boxBody li::marker{ color: var(--orsa-ink); }

/* ===== body — Text 04, opened up for long-form ===== */

.orsa-article__body{ padding: 56px 0 0; }
@media (max-width: 989px){ .orsa-article__body{ padding-top: 44px; } }

.orsa-article__body,
.orsa-article__deck,
.orsa-article__boxBody{
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;          /* was 1 — unreadable over a full article */
  letter-spacing: -0.05em;   /* was -0.06em */
  color: var(--orsa-ink);    /* reading colour — headings/links stay red */
}
@media (min-width: 990px){
  .orsa-article__body,
  .orsa-article__deck{ font-size: 18px; }
}

/* flatten pasted Word / Google Docs markup, inline styles included */
.orsa-article__body :is(span, small, font){
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  color: inherit !important;
  background: transparent !important;
}
/* but real emphasis still works */
.orsa-article__body :is(strong, b){ font-weight: 700; }
.orsa-article__body :is(em, i){ font-style: italic; }

.orsa-article__body :is(p, ul, ol){ margin: 0 0 28px 0; }
.orsa-article__body li{ margin: 0 0 10px 0; }
.orsa-article__body li::marker{ color: var(--orsa-ink); }
.orsa-article__body a{
  color: var(--orsa-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.orsa-article__body a:hover{ background: var(--orsa-tint); }

.orsa-article__body h2{
  font-family: "AlteHaasGrotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 0.88;
  letter-spacing: -0.06em;
  color: var(--orsa-head);

  margin: 56px 0 20px;
  scroll-margin-top: calc(var(--orsa-nav-h) + 20px);
  text-wrap: balance;
}
.orsa-article__body > h2:first-child{ margin-top: 0; }

.orsa-article__body :is(h3, h4){
  font-family: "AlteHaasGrotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--orsa-head);

  margin: 36px 0 10px;
  scroll-margin-top: calc(var(--orsa-nav-h) + 20px);
}

.orsa-article__body blockquote{
  margin: 56px 0;
  padding: 0;
  border: 0;

  font-family: "AlteHaasGrotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-wrap: balance;
  color: var(--orsa-head);
}
.orsa-article__body blockquote p{ margin: 0 0 14px 0; }

.orsa-article__body img{ max-width: 100%; height: auto; border-radius: 0; }

.orsa-article__scroller{ overflow-x: auto; margin: 28px 0; }

/* ===== tables — survives Docs/Word pasted markup ===== */

/* the wrapper Docs/Word leaves around a pasted table becomes the scroller */
.orsa-article__body div:has(> table){
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 40px 0;
}

.orsa-article__body table{
  width: 100% !important;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: auto;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: -0.06em;
  border-top: 2px solid var(--orsa-ink);
  border-bottom: 2px solid var(--orsa-ink);
}

/* ignore the fixed column widths Docs pastes in */
.orsa-article__body :is(colgroup, col){ width: auto !important; }

.orsa-article__body :is(th, td){
  text-align: left;
  vertical-align: top;
  padding: 14px 24px 14px 0;
  border: 0 none !important;
  border-top: 1px solid var(--orsa-rule-soft) !important;
  background: transparent !important;
}
.orsa-article__body :is(th, td):last-child{ padding-right: 0; }

/* cells from a paste hold a <p> — flatten it */
.orsa-article__body :is(th, td) > p{ margin: 0; font-size: inherit; line-height: inherit; }
.orsa-article__body :is(th, td) > p + p{ margin-top: 6px; }

/* header row: a real <thead>, or the first row of a Docs paste.
   Same ink as the rest of the table, vertically centred in the row. */
.orsa-article__body thead :is(th, td),
.orsa-article__body table > tbody > tr:first-child > td{
  text-transform: uppercase;
  font-weight: 500;
  opacity: 1;
  vertical-align: middle;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top: 0 none !important;
}
.orsa-article__body thead :is(th, td) strong,
.orsa-article__body table > tbody > tr:first-child > td strong{ font-weight: 500; }

/* row label column */
.orsa-article__body table > tbody > tr:not(:first-child) > td:first-child{ font-weight: 700; }

/* ==========================================================
   IN-ARTICLE BLOCKS — paste-able HTML for the blog editor.
   Everything is scoped to .orsa-article__body so these classes
   can't leak into other sections.
   ========================================================== */

/* image (or two) with an optional caption */
.orsa-article__body .orsa-media{
  margin: 44px 0;
  padding: 0;
}
.orsa-article__body .orsa-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}
.orsa-article__body .orsa-media figcaption{
  margin-top: 8px;
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight: 500;
  font-size: 13px;
  line-height: 0.99;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  opacity: 0.62;
}

/* two images side by side */
.orsa-article__body .orsa-media--pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--orsa-gap, 12px);
}
.orsa-article__body .orsa-media--pair figcaption{ grid-column: 1 / -1; }
@media (max-width: 599px){
  .orsa-article__body .orsa-media--pair{ grid-template-columns: 1fr; }
}

/* ----- image beside text -----------------------------------------
   The TEXT comes first in the HTML, always. That is the reading order
   crawlers and screen readers get: heading, then copy, then picture.
   CSS is what moves the image to the left when we want it there, and
   on mobile it always falls back under the text.
------------------------------------------------------------------- */
.orsa-article__body .orsa-split{
  display: grid;
  grid-template-columns: 4fr 8fr;   /* image | text */
  align-items: center;
  gap: var(--orsa-gap, 12px) 40px;
  margin: 56px 0;
}
.orsa-article__body .orsa-split__media{
  order: -1;                        /* pull the image to the left column */
  margin: 0;
}

/* --flip: image on the right, text keeps the wide column */
.orsa-article__body .orsa-split--flip{ grid-template-columns: 8fr 4fr; }
.orsa-article__body .orsa-split--flip .orsa-split__media{ order: 0; }

.orsa-article__body .orsa-split__media img{
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.orsa-article__body .orsa-split__media figcaption{
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  opacity: 0.62;
}
.orsa-article__body .orsa-split__text > :first-child{ margin-top: 0; }
.orsa-article__body .orsa-split__text > :last-child{ margin-bottom: 0; }

@media (max-width: 749px){
  .orsa-article__body .orsa-split{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* one column: text first, image underneath — both variants */
  .orsa-article__body .orsa-split__media,
  .orsa-article__body .orsa-split--flip .orsa-split__media{ order: 0; }
}

/* highlighted note */
.orsa-article__body .orsa-note{
  margin: 44px 0;
  padding: 20px;
  background: var(--orsa-tint);
  border-left: 2px solid var(--orsa-ink);
}
.orsa-article__body .orsa-note > :first-child{ margin-top: 0; }
.orsa-article__body .orsa-note > :last-child{ margin-bottom: 0; }

/* Shopify RTE list fixes (carried over from the old sheet) */
.orsa-article__body li > p{ margin: 0; }
.orsa-article__body ul,
.orsa-article__body ol{
  list-style-position: outside;
  padding-left: 18px;
}

/* ===== FAQ (upgraded from H3 + copy by the section script) ===== */

.orsa-article__faq{
  border-top: 2px solid var(--orsa-ink);
  margin: 20px 0 0;
}
.orsa-article__faq details{ border-bottom: 1px solid var(--orsa-rule-soft); }
.orsa-article__faq summary{
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 32px 16px 0;
  color: var(--orsa-head);
}
.orsa-article__faq summary::-webkit-details-marker{ display: none; }
.orsa-article__faq summary:hover{ background: var(--orsa-tint); }
.orsa-article__faq summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 15px;
}
.orsa-article__faq details[open] summary::after{ content: "–"; }
.orsa-article__faq .orsa-article__faqBody > :last-child{ margin-bottom: 20px; }

/* ===== keep reading — grid module, like /pages/blog ===== */

.orsa-article__related{
  margin-top: 96px;
  padding-bottom: 96px;
}

.orsa-article__relatedHead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.orsa-article__tiles{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--orsa-gap);

  list-style: none;
  margin: 0 auto;              /* auto = stays on the same measure as the head + body */
  padding: 20px 0 0;
  border-top: 2px solid var(--orsa-ink);
}

/* fewer than 4 posts -> fill the row evenly.
   :where() keeps specificity at 0,1,0 so the mobile rules below still win. */
.orsa-article__tiles:where(:has(li:nth-child(3):last-child)){ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.orsa-article__tiles:where(:has(li:nth-child(2):last-child)){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.orsa-article__tiles:where(:has(li:only-child)){ grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 989px){ .orsa-article__tiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px){ .orsa-article__tiles{ grid-template-columns: 1fr; } }

.orsa-article__tiles li{ margin: 0; min-width: 0; }

.orsa-article__tile{ display: block; text-decoration: none; }

.orsa-article__tileMedia{
  position: relative;
  display: block;
  aspect-ratio: 461 / 538;   /* same portrait tile as the blog grid */
  overflow: hidden;
  border-radius: 0;
  background: rgba(122, 58, 34, 0.06);
}
.orsa-article__tileMedia img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.orsa-article__tilePlaceholder{
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(122, 58, 34, 0.12), rgba(122, 58, 34, 0.03));
}
.orsa-article__tile:hover .orsa-article__tileMedia img{ opacity: 0.82; }

/* dates are gone from the tiles — the title carries the divider */
.orsa-article__tileTitle{
  display: block;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--orsa-rule-soft);

  font-family: "AlteHaasGrotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  text-wrap: balance;
  color: var(--orsa-head);
}

@media (prefers-reduced-motion: reduce){
  .orsa-article__tocScroll{ scroll-behavior: auto; }
  .orsa-article__pill{ transition: none; }
}


/* ===== FAQ (upgraded from H3 + copy by the section script) =====
   REPLACES the existing "/* ===== FAQ ... ===== */" block at the bottom
   of section-orsa-article-split.css — delete the old one, paste this.

   Changes: the question keeps its real <h3> (heading outline survives),
   so it needs its article margins reset and the +/− re-centred.
*/

.orsa-article__faq{
  border-top: 2px solid var(--orsa-ink);
  margin: 20px 0 0;
}
.orsa-article__faq details{ border-bottom: 1px solid var(--orsa-rule-soft); }

.orsa-article__faq summary{
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 16px 32px 16px 0;
  color: var(--orsa-head);
}
.orsa-article__faq summary::-webkit-details-marker{ display: none; }
.orsa-article__faq summary:hover{ background: var(--orsa-tint); }

/* the question itself — article H3 scale, margins killed */
.orsa-article__faq summary h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.06em;
  text-transform: none;
  text-wrap: balance;
}
@media (max-width: 749px){
  .orsa-article__faq summary h3{ font-size: 20px; }
}

.orsa-article__faq summary::after{
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);

  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
}
.orsa-article__faq details[open] summary::after{ content: "–"; }

.orsa-article__faq .orsa-article__faqBody > :last-child{ margin-bottom: 20px; }



/* a photo pasted straight into the body fills the measure, whatever its file size */
.orsa-article__body > p > img,
.orsa-article__body > p > span > img,
.orsa-article__body > span > img,
.orsa-article__body > img{
  display: block;
  width: 100%;
  height: auto;
  margin: 44px 0;
}