/* Generated from torabi-sketch — do not edit by hand. Source: article.html #article-page/#article-topic */

/* ============================================================
   ARTICLE LONGREAD — Direction A (sticky TOC + reading progress)
   All selectors prefixed .art- to avoid collisions.
============================================================ */

/* Reading-progress bar (fixed, top of viewport) */
.art-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:60;
  background:transparent; pointer-events:none;
}
.art-progress__bar{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-soft), var(--gold), var(--wine));
  box-shadow:0 0 12px -2px rgba(107,31,53,.4);
  transition:width .08s linear;
}

/* ---- Header block ---- */
.art-head{ max-width:760px; }
.art-chip{
  display:inline-flex; align-items:center;
  padding:6px 16px; border-radius:999px;
  background:var(--wine); color:var(--gold);
  font-size:13px; font-weight:600; letter-spacing:.01em;
  transition:background .3s ease, transform .3s ease;
}
.art-chip:hover{ background:var(--wine-dk); transform:translateY(-1px); }

.art-h1{
  font-size:clamp(30px,5vw,52px);
  line-height:1.18; color:var(--ink);
}
.art-deck{
  font-size:clamp(16px,2.2vw,19px);
  line-height:2; color:var(--inkSoft, #3A312D);
  max-width:42rem;
}

/* Byline + share row */
.art-meta{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding-top:22px; border-top:1px solid var(--line);
}
.art-byline{ display:inline-flex; align-items:center; gap:14px; }
.art-avatar{
  width:46px; height:46px; flex:0 0 46px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--wine), var(--wine-dk));
  color:var(--gold); font-weight:700; font-size:19px;
  box-shadow:inset 0 0 0 1px rgba(197,163,91,.45), 0 8px 18px -10px rgba(107,31,53,.55);
}
.art-byline__text{ display:flex; flex-direction:column; gap:3px; }
.art-byline__name{ font-size:15px; font-weight:600; color:var(--ink); }
.art-byline__sub{ font-size:12.5px; color:var(--color-smoke,#8A8076); display:inline-flex; align-items:center; }
.art-dot{ width:3px; height:3px; border-radius:999px; background:var(--gold); margin:0 9px; }

.art-share{ display:inline-flex; align-items:center; gap:8px; }
.art-share__label{ font-size:12.5px; color:var(--color-smoke,#8A8076); margin-left:4px; }
.art-share__btn{
  position:relative;
  width:38px; height:38px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid var(--line); background:#fff; color:#5A524C; cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
.art-share__btn:hover{ border-color:var(--wine); color:var(--wine); transform:translateY(-2px); }
.art-share__btn:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }
.art-copied{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  background:var(--ink); color:var(--cream);
  font-size:11px; padding:4px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.art-copied.is-on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- Figures ---- */
.art-figure{ margin:0; }
.art-figure__frame{
  border-radius:var(--radius); overflow:hidden;
  background:var(--cream);
  box-shadow:0 1px 0 rgba(23,19,17,.04), 0 30px 70px -34px rgba(23,19,17,.30);
  aspect-ratio:16/9;
}
.art-figure__frame--inline{ aspect-ratio:16/10; }
.art-figure__img{ width:100%; height:100%; object-fit:cover; display:block; }
.art-figcap{
  margin-top:14px; text-align:center;
  font-size:13px; line-height:1.9; color:var(--color-smoke,#8A8076);
  font-family:var(--font-fa);
}
.art-figure:not(.art-figure--hero) .art-figcap{ text-align:right; }
.art-figcap::before{
  content:''; display:inline-block; vertical-align:middle;
  width:18px; height:1px; background:var(--gold); margin-left:10px;
}

/* ============================================================
   LAYOUT — prose + sticky TOC (RTL: TOC in the start/right margin)
============================================================ */
.art-layout{ display:block; }
.art-prose{
  width:min(100%, 46rem);
  margin-inline:auto;
  text-align:right;
}

/* Desktop sticky TOC */
.art-toc{ display:none; }
.art-toc-mobile{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg,#fff,#FCFAF3);
  padding:18px 20px; margin-bottom:36px;
}
.art-toc__title{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; color:var(--wine);
  letter-spacing:.01em; margin-bottom:12px;
}
.art-toc__title svg{ color:var(--gold); }
.art-toc-mobile__list{
  list-style:none; margin:0; padding:0;
  counter-reset:toc;
  display:grid; gap:9px;
}
.art-toc-mobile__list li{ counter-increment:toc; }
.art-toc-mobile__list a{
  display:flex; align-items:baseline; gap:10px;
  font-size:14px; line-height:1.7; color:var(--inkSoft,#3A312D);
  transition:color .2s ease;
}
.art-toc-mobile__list a::before{
  content:"۰" counter(toc); /* simple gold index */
  color:var(--gold); font-weight:700; font-size:12px; flex:0 0 auto;
}
.art-toc-mobile__list a:hover{ color:var(--wine); }

/* ---- Prose rhythm ---- */
.art-lead{
  font-size:clamp(17px,2.1vw,20px);
  line-height:2.05; color:var(--ink);
  font-weight:500;
  margin:0 0 8px;
}
.art-lead::first-letter{
  float:right; font-weight:700; color:var(--wine);
  font-size:3.1em; line-height:.82; margin-left:12px; margin-top:6px;
}
.art-prose h2{
  position:relative;
  font-family:var(--font-fa);
  font-size:clamp(22px,3vw,30px);
  font-weight:700; letter-spacing:-.012em;
  line-height:1.4; color:var(--ink);
  margin:48px 0 16px; padding-right:18px;
  scroll-margin-top:96px;
}
.art-prose h2::before{
  content:''; position:absolute; right:0; top:.18em; bottom:.18em;
  width:4px; border-radius:999px;
  background:linear-gradient(180deg, var(--gold), var(--wine));
}
.art-prose h3{
  font-family:var(--font-fa);
  font-size:18px; font-weight:700; color:var(--ink);
  margin:0;
}
.art-prose p{
  font-size:16.5px; line-height:2.15; color:var(--inkSoft,#3A312D);
  margin:0 0 18px;
}
.art-prose strong{ color:var(--ink); font-weight:700; }

/* ---- Pull-quote ---- */
.art-pull{
  position:relative; margin:34px 0;
  padding:15px 30px 15px 26px;
  border-radius:var(--radius);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(197,163,91,.12), transparent 60%),
    linear-gradient(180deg,#FCFAF3,#FAF2E0);
  border:1px solid var(--color-goldLn,#E9D9A8);
  border-right:4px solid var(--wine);
}
.art-pull__mark{
  position:absolute; top:16px; left:20px;
  color:var(--gold); opacity:.45;
}
.art-pull__q{
  margin:0; position:relative; z-index:1;
  font-family:var(--font-fa);
  font-size:clamp(20px,2.8vw,26px);
  line-height:1.7; font-weight:600;
  color:var(--wine); letter-spacing:-.01em;
}

/* ---- Callout / checklist boxes ---- */
.art-callout{
  margin:30px 0;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:24px 24px 22px;
  box-shadow:0 1px 0 rgba(23,19,17,.04), 0 20px 44px -30px rgba(23,19,17,.20);
}
.art-callout--check{ border-color:var(--color-goldLn,#E9D9A8); background:linear-gradient(180deg,#fff,#FCFAF3); }
.art-callout--key{
  background:
    radial-gradient(110% 130% at 100% 0%, rgba(197,163,91,.14), transparent 58%),
    linear-gradient(180deg,#FCFAF3,#FAF2E0);
  border-color:var(--color-goldLn,#E9D9A8);
}
.art-callout__head{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.art-callout__icon{
  width:34px; height:34px; flex:0 0 34px; border-radius:10px;
  display:grid; place-items:center;
  background:var(--wine); color:var(--cream);
}
.art-callout__icon--gold{ background:var(--gold); color:var(--wine); }
.art-callout__title{
  font-family:var(--font-fa); font-size:18px; font-weight:700; color:var(--ink); margin:0;
}

.art-checklist{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.art-checklist li{
  position:relative; padding-right:30px;
  font-size:15.5px; line-height:1.8; color:var(--inkSoft,#3A312D);
}
.art-checklist li::before{
  content:''; position:absolute; right:0; top:.35em;
  width:18px; height:18px; border-radius:6px;
  background:#E8F4E8;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F7A39' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}

.art-key{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.art-key li{
  position:relative; padding-right:26px;
  font-size:15.5px; line-height:1.8; color:var(--inkSoft,#3A312D); font-weight:500;
}
.art-key li::before{
  content:''; position:absolute; right:0; top:.55em;
  width:8px; height:8px; border-radius:2px;
  transform:rotate(45deg);
  background:var(--gold);
}

/* ---- Bulleted / compact list ---- */
.art-list{ list-style:none; margin:0 0 20px; padding:0; display:grid; gap:12px; }
.art-list li{
  position:relative; padding-right:24px;
  font-size:16px; line-height:1.95; color:var(--inkSoft,#3A312D);
}
.art-list li::before{
  content:''; position:absolute; right:0; top:.7em;
  width:7px; height:7px; border-radius:999px;
  background:var(--wine);
  box-shadow:0 0 0 4px rgba(107,31,53,.08);
}
.art-list--compact li{ font-size:15.5px; line-height:1.8; }

/* ---- Numbered steps ---- */
.art-steps{ list-style:none; margin:0 0 6px; padding:0; display:grid; gap:14px; counter-reset:none; }
.art-steps li{
  display:flex; align-items:flex-start; gap:14px;
  font-size:16px; line-height:1.85; color:var(--inkSoft,#3A312D);
}
.art-steps__num{
  flex:0 0 30px; width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center; margin-top:2px;
  background:var(--wine); color:var(--cream);
  font-weight:700; font-size:14px;
  box-shadow:inset 0 0 0 1px rgba(197,163,91,.4);
}

/* ---- CTA ---- */
.art-cta{ margin:34px 0 8px; }

/* ---- Author bio ---- */
.art-author{
  margin-top:40px; padding:24px;
  display:flex; align-items:flex-start; gap:18px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:#fff;
  box-shadow:0 1px 0 rgba(23,19,17,.04), 0 20px 44px -30px rgba(23,19,17,.18);
}
.art-author__avatar{
  width:56px; height:56px; flex:0 0 56px; border-radius:999px;
  display:grid; place-items:center;
  background:linear-gradient(145deg, var(--wine), var(--wine-dk));
  color:var(--gold); font-weight:700; font-size:24px;
  box-shadow:inset 0 0 0 1px rgba(197,163,91,.45), 0 10px 22px -12px rgba(107,31,53,.55);
}
.art-author__body{ flex:1 1 auto; min-width:0; }
.art-author__eyebrow{
  font-family:'Poppins', Georgia, serif; font-style:italic;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:#9c8a5a;
}
.art-author__name{ font-family:var(--font-fa); font-size:18px; font-weight:700; color:var(--ink); margin:6px 0 8px; }
.art-author__bio{ font-size:14.5px; line-height:1.95; color:var(--inkSoft,#3A312D); margin:0; max-width:46ch; }

/* ============================================================
   DESKTOP — show sticky TOC in the right (RTL start) margin
============================================================ */
@media (min-width:1024px){
  .art-layout{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    column-gap:56px;
    align-items:stretch;   /* sidebar column fills full height so its sticky inner can travel */
  }
  .art-toc{ align-self:stretch; }
  /* TOC is DOM-first → in RTL grid it lands in the right (start) column */
  .art-toc{ display:block; }
  .art-toc__inner{
    position:sticky; top:108px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg,#fff,#FCFAF3);
    padding:20px 18px;
  }
  .art-toc__nav{ display:grid; gap:2px; margin-top:6px; }
  .art-toc__link{
    position:relative; display:block;
    padding:8px 14px 8px 10px;
    font-size:13.5px; line-height:1.6; color:var(--color-smoke,#8A8076);
    border-radius:8px;
    transition:color .2s ease, background .2s ease;
  }
  .art-toc__link::before{
    content:''; position:absolute; right:0; top:50%; transform:translateY(-50%) scaleY(0);
    width:3px; height:60%; border-radius:999px; background:var(--wine);
    transition:transform .25s cubic-bezier(.2,.7,.2,1);
  }
  .art-toc__link:hover{ color:var(--wine); }
  .art-toc__link.is-active{ color:var(--wine); font-weight:700; background:rgba(107,31,53,.05); }
  .art-toc__link.is-active::before{ transform:translateY(-50%) scaleY(1); }

  .art-toc-mobile{ display:none; }
  .art-prose{ width:100%; margin-inline:0; max-width:46rem; }
}

@media (min-width:1280px){
  .art-layout{ grid-template-columns:280px minmax(0,1fr); column-gap:72px; }
}

/* ---- Responsive tightening ---- */
@media (max-width:640px){
  .art-meta{ gap:18px; }
  .art-figure__frame{ aspect-ratio:4/3; }
  .art-pull{ padding:26px 22px 22px; }
  .art-author{ flex-direction:column; gap:14px; padding:20px; }
  .art-share__label{ display:none; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .art-progress__bar{ transition:none; }
  .art-share__btn:hover{ transform:none; }
  .art-chip:hover{ transform:none; }
  .art-toc__link::before{ transition:none; }
}

/* sidebar uses the website's PRIMARY colour (wine) for the category label,
   the sidebar title, and the topic/section titles. */
.art-toc__topic{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:16px; padding:6px 14px; border-radius:999px;
  font-size:12.5px; font-weight:700; color:var(--wine);
  background:color-mix(in srgb, var(--wine) 10%, transparent);
  border:1px solid color-mix(in srgb, var(--wine) 30%, transparent);
  transition:background .25s ease;
}
.art-toc__topic::before{ content:''; width:7px; height:7px; border-radius:999px; background:var(--wine); }
.art-toc__topic:hover{ background:color-mix(in srgb, var(--wine) 16%, transparent); }
.art-toc__title{ color:var(--wine); }
.art-toc__title svg{ color:var(--wine); }
@media (min-width:1024px){
  .art-toc__link:hover{ color:var(--wine); }
  .art-toc__link.is-active{ color:var(--wine); background:color-mix(in srgb, var(--wine) 8%, transparent); }
  .art-toc__link.is-active::before{ background:var(--wine); }
}

.pg-hero .art-chip{ background:rgba(197,163,91,.14); color:var(--gold-soft); border:1px solid rgba(197,163,91,.42); }
.pg-hero .art-chip:hover{ background:rgba(197,163,91,.22); transform:translateY(-1px); }
.pg-hero .art-h1{ color:var(--cream); }
.pg-hero .art-deck{ color:rgba(248,244,236,.8); }
.pg-hero .art-meta{ border-top-color:rgba(248,244,236,.16); }
.pg-hero .art-byline__name{ color:var(--cream); }
.pg-hero .art-byline__sub{ color:rgba(248,244,236,.62); }
.pg-hero .art-dot{ background:var(--gold); }
.pg-hero .art-share__label{ color:rgba(248,244,236,.62); }
.pg-hero .art-share__btn{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.28); color:var(--cream); }
.pg-hero .art-share__btn:hover{ border-color:var(--gold-soft); color:var(--gold-soft); background:rgba(197,163,91,.12); }
.pg-hero .art-copied{ background:var(--cream); color:var(--ink); }

/* ---- Base styling for arbitrary editor content inside .art-prose ----
   Scoped with :not([class]) so the bespoke list components authored in the
   article body (.art-checklist, .art-key, .art-list, .art-steps, …) keep their
   own bullets/markers; only plain editor <ul>/<ol> get this default treatment. */
.art-prose ul:not([class]), .art-prose ol:not([class]){ margin:0 0 20px; padding-right:24px; display:grid; gap:10px; }
.art-prose ul:not([class]){ list-style:none; }
.art-prose ul:not([class]) li{ position:relative; padding-right:24px; font-size:16px; line-height:1.95; color:var(--inkSoft,#3A312D); }
.art-prose ul:not([class]) li::before{ content:''; position:absolute; right:0; top:.7em; width:7px; height:7px; border-radius:999px; background:var(--wine); box-shadow:0 0 0 4px rgba(107,31,53,.08); }
.art-prose ol:not([class]){ list-style:decimal; }
.art-prose ol:not([class]) li{ font-size:16px; line-height:1.95; color:var(--inkSoft,#3A312D); padding-right:6px; }
.art-prose a:not([class]){ color:var(--wine); text-decoration:underline; text-underline-offset:3px; }
.art-prose a:not([class]):hover{ color:var(--wine-dk); }
/* Responsive safety for all images except the figure-frame image (which sizes itself). */
.art-prose img:not(.art-figure__img){ max-width:100%; height:auto; border-radius:var(--radius); margin:24px 0; }
/* Plain editor blockquotes only — the bespoke .art-pull__q keeps its own frame. */
.art-prose blockquote:not([class]){ margin:30px 0; padding:6px 22px; border-right:4px solid var(--wine); color:var(--wine); font-weight:600; font-size:clamp(18px,2.4vw,22px); line-height:1.7; }
.art-prose figure:not([class]){ margin:24px 0; }
.art-prose figcaption:not([class]){ margin-top:10px; text-align:center; font-size:13px; color:var(--color-smoke,#8A8076); }