/* Resource article reading system.
   One authoritative layer for guides; hub/index styling lives in content-hub.css. */

.article-progress{
  position:fixed;
  z-index:80;
  top:0;
  left:0;
  width:0;
  height:2px;
  background:var(--color-gold);
  transition:width 80ms linear;
}

.article-hero{
  position:relative;
  display:flex;
  min-height:clamp(480px,60svh,650px);
  align-items:flex-end;
  overflow:hidden;
  padding:clamp(116px,14vw,170px) max(24px,5vw) clamp(66px,8vw,92px);
  border-bottom:1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 82% 18%,rgba(201,170,102,.13),transparent 31%),
    radial-gradient(circle at 10% 90%,rgba(201,170,102,.10),transparent 34%),
    linear-gradient(145deg,var(--color-navy-950),var(--color-navy-900) 66%,#13203a);
}
.article-hero::after{
  content:"";
  position:absolute;
  right:-180px;
  top:-210px;
  width:540px;
  height:540px;
  border:1px solid rgba(242,238,230,.075);
  border-radius:50%;
  box-shadow:0 0 0 48px rgba(242,238,230,.015),0 0 0 100px rgba(242,238,230,.01);
}
.article-hero-inner{
  position:relative;
  z-index:2;
  width:min(100%,var(--article-max,1180px));
  margin:0 auto;
}
.article-back{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-bottom:28px;
  color:#aeb8c7;
  font-family:var(--font-label);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
  transition:color var(--motion-fast) var(--ease);
}
.article-back:hover{color:var(--color-gold-light)}
.article-hero .mini-label{
  margin-bottom:18px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--color-gold-light);
  font-family:var(--font-label);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.article-hero h1{
  max-width:1030px;
  margin:0;
  color:#fff;
  font-family:var(--font-heading);
  font-size:clamp(3.1rem,5.7vw,6rem);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.01;
}
.article-deck{
  max-width:var(--article-copy,760px);
  margin:25px 0 0;
  color:#cbd3de;
  font-size:var(--type-lead);
  line-height:1.7;
}
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-top:28px;
  color:#8f9aaa;
  font-family:var(--font-label);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.075em;
  text-transform:uppercase;
}

.article-shell{
  display:grid;
  grid-template-columns:minmax(210px,260px) minmax(0,var(--article-copy,760px));
  gap:clamp(46px,6vw,82px);
  width:min(calc(100% - 48px),var(--article-max,1180px));
  margin:0 auto;
  padding:76px 0 100px;
  align-items:start;
}
.article-toc{
  position:sticky;
  top:calc(var(--sg-header-height,76px) + 24px);
  padding:20px 18px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:rgba(9,20,38,.72);
  box-shadow:0 18px 44px rgba(2,8,20,.10);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.article-toc>p{
  margin:0 0 13px;
  color:#dce2ea;
  font-family:var(--font-label);
  font-size:.625rem;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}
.article-toc nav{display:grid;gap:4px}
.article-toc a{
  padding:8px 0 8px 12px;
  border-left:1px solid rgba(255,255,255,.09);
  color:#8f9aaa;
  font-size:.8125rem;
  line-height:1.42;
  text-decoration:none;
  transition:color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease);
}
.article-toc a:hover,
.article-toc a.is-active{
  border-color:var(--color-gold);
  color:#fff;
}

.article-body{min-width:0}
.article-audience{
  margin:0 0 25px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border-subtle);
  color:#8f9aaa;
  font-size:.875rem;
  line-height:1.62;
}
.article-lead{
  margin:0 0 44px;
  color:#f2f4f7;
  font-family:var(--font-body);
  font-size:clamp(1.55rem,2.3vw,2.02rem);
  line-height:1.46;
}
.article-body section{
  scroll-margin-top:120px;
  padding:42px 0;
  border-top:1px solid var(--border-subtle);
}
.article-body section:first-of-type{padding-top:0;border-top:0}
.article-body h2{
  margin:0 0 19px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:clamp(1.85rem,2.9vw,2.55rem);
  font-weight:600;
  letter-spacing:-.018em;
  line-height:1.12;
}
.article-body h3{
  margin:26px 0 10px;
  color:#fff;
  font-family:var(--font-heading);
  font-size:1.3rem;
  font-weight:600;
}
.article-body p{
  max-width:72ch;
  margin:0 0 19px;
  color:#c5ced9;
  font-size:1rem;
  line-height:1.82;
}
.article-body ul,
.article-body ol{
  max-width:72ch;
  margin:18px 0 24px;
  padding-left:1.3rem;
  color:#c5ced9;
}
.article-body li{margin:10px 0;line-height:1.72}
.article-body strong{color:#f4f6f8}
.article-body a{
  color:#edf0f3;
  text-decoration-color:rgba(201,170,102,.46);
  text-underline-offset:3px;
}
.article-body a:hover{text-decoration-color:var(--color-gold)}

/* Editorial callouts */
.article-callout{
  margin:32px 0 10px;
  padding:26px 28px;
  border:1px solid rgba(201,170,102,.22);
  border-radius:var(--radius-card);
  background:
    radial-gradient(circle at 92% 10%,rgba(201,170,102,.10),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
}
.article-callout .callout-label{
  margin:0 0 10px;
  color:var(--color-gold-light);
  font-family:var(--font-label);
  font-size:.6875rem;
  font-weight:600;
  letter-spacing:.09em;
  line-height:1.4;
  text-transform:uppercase;
}
.article-callout p{
  max-width:none;
  margin:0;
  color:#e5e9ee;
  font-family:var(--font-body);
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  line-height:1.55;
}
.founder-story .article-callout{
  margin:0 0 12px;
  background:rgba(255,255,255,.025);
}
.founder-story .article-callout .callout-label{
  color:#f1f4f7;
  font-family:var(--font-heading);
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
}
.founder-story .article-callout p{
  max-width:none;
  color:#b9c3cf;
  font-family:var(--font-body);
  font-size:.9375rem;
}

/* Numbered processes inside guides */
.article-numbered{
  counter-reset:sg-step;
  display:grid;
  gap:0;
  margin:26px 0;
  border-top:1px solid var(--border-subtle);
}
.article-step{
  counter-increment:sg-step;
  display:grid;
  grid-template-columns:42px 1fr;
  gap:17px;
  padding:21px 0;
  border-bottom:1px solid var(--border-subtle);
}
.article-step::before{
  content:counter(sg-step,decimal-leading-zero);
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border:1px solid var(--border-gold);
  border-radius:50%;
  background:rgba(201,170,102,.07);
  color:var(--color-gold-light);
  font-family:var(--font-accent);
  font-size:.95rem;
  font-style:italic;
}
.article-step h3{margin:3px 0 6px;font-size:1.2rem}
.article-step p{margin:0;font-size:.9375rem}

/* Tables */
.article-body .table-wrap{
  margin:28px 0;
  overflow:auto;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:rgba(255,255,255,.018);
  -webkit-overflow-scrolling:touch;
}
.article-body table.cmp{
  width:100%;
  min-width:620px;
  margin:0;
  border-collapse:collapse;
  font-size:.9rem;
}
.article-body table.cmp th,
.article-body table.cmp td{
  padding:14px 15px;
  border:0;
  border-right:1px solid rgba(255,255,255,.055);
  border-bottom:1px solid rgba(255,255,255,.075);
  text-align:left;
  vertical-align:top;
  line-height:1.5;
}
.article-body table.cmp thead th{
  position:sticky;
  z-index:1;
  top:0;
  background:#15223a;
  color:#fff;
  font-weight:600;
}
.article-body table.cmp td{color:#cfd6e0}
.article-body table.cmp td:first-child{color:#eef2f7;font-weight:500}
.article-body table.cmp tbody tr:nth-child(even){background:rgba(255,255,255,.025)}
.article-body table.cmp tbody tr:hover{background:rgba(201,170,102,.035)}

/* Related reading / CTA */
.article-next{
  width:min(calc(100% - 48px),var(--article-max,1180px));
  margin:0 auto 72px;
}
.article-next-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:38px;
  border:1px solid rgba(201,170,102,.18);
  border-radius:var(--radius-panel);
  background:
    radial-gradient(circle at 88% 12%,rgba(201,170,102,.13),transparent 30%),
    linear-gradient(135deg,#17243e,#101c31);
}
.article-next .eyebrow{margin:0 0 6px}
.article-next h2{
  margin:0;
  font-family:var(--font-heading);
  font-size:clamp(1.7rem,2.7vw,2.5rem);
  font-weight:600;
}
.article-disclaimer{
  width:min(calc(100% - 48px),var(--article-max,1180px));
  margin:-38px auto 58px;
  color:#818d9e;
  font-size:.75rem;
  line-height:1.65;
}
.article-disclaimer strong{color:#aeb9c7}

/* Generic resource-card fallback for any article-related listings outside the hub. */
.resource-card-link{
  display:flex;
  min-height:100%;
  flex-direction:column;
  color:inherit;
  text-decoration:none;
}
.resource-card .resource-card-link{padding:30px}
.resource-card .resource-arrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:auto;
  padding-top:28px;
  color:var(--color-gold-light);
  font-family:var(--font-label);
  font-size:.6875rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

@supports (content-visibility:auto){
  .article-body section:nth-of-type(n+3){
    content-visibility:auto;
    contain-intrinsic-size:auto 520px;
  }
}

@media(max-width:900px){
  .article-hero{min-height:0}
  .article-shell{grid-template-columns:1fr;gap:26px}
  .article-toc{position:relative;top:auto;overflow:hidden}
  .article-toc nav{
    display:flex;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .article-toc nav::-webkit-scrollbar{display:none}
  .article-toc a{
    flex:0 0 auto;
    padding:9px 12px;
    border:1px solid var(--border-subtle);
    border-radius:var(--radius-pill);
    white-space:nowrap;
  }
  .article-toc a:hover,
  .article-toc a.is-active{
    border-color:var(--border-gold);
    background:rgba(201,170,102,.06);
  }
  .article-next-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:600px){
  .article-hero{padding:110px 24px 62px}
  .article-hero h1{font-size:clamp(2.8rem,12vw,4.25rem)}
  .article-shell{width:calc(100% - 40px);padding:52px 0 76px}
  .article-callout{padding:22px 20px}
  .article-body section{padding:34px 0}
  .article-next{width:calc(100% - 40px)}
  .article-next-inner{padding:28px 24px}
  .article-disclaimer{width:calc(100% - 40px)}
}
@media(prefers-reduced-motion:reduce){
  .article-progress{transition:none}
}