/* =====================================================================
   ARTICLE — Artistic editorial layout
   ===================================================================== */
.art-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2, #c79a3f));
  z-index:2000; transition:width .1s linear;
}

/* Hero — cinematic */
.art-hero{
  position:relative; overflow:hidden;
  padding:clamp(140px,20vh,220px) 0 clamp(56px,8vh,88px);
  background:radial-gradient(ellipse 90% 90% at 80% 0%, color-mix(in oklch,var(--accent) 9%,transparent) 0%, transparent 60%), var(--paper);
  border-bottom:1px solid var(--line);
}
.art-hero::before{
  content:''; position:absolute; inset:0; z-index:0; opacity:.5;
  background-image:
    linear-gradient(color-mix(in oklch,var(--ink) 4%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklch,var(--ink) 4%,transparent) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 60% 80% at 70% 30%, #000 0%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 70% 30%, #000 0%, transparent 70%);
}
.art-hero .container{ max-width:840px; position:relative; z-index:2; }
.art-back{ font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin-bottom:30px; transition:color .2s, gap .2s; }
.art-back:hover{ color:var(--accent); gap:12px; }
.art-hero-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.art-hero h1{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(38px,6vw,88px); line-height:1.0; letter-spacing:-.035em;
  margin:20px 0 24px; text-wrap:balance; max-width:16ch;
}
.art-hero-meta{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); display:flex; gap:14px; flex-wrap:wrap; }
.art-hero-meta::before{ content:''; display:block; width:44px; height:1px; background:var(--accent); align-self:center; }

/* Body */
.art-body{ padding:clamp(56px,8vh,96px) 0 clamp(90px,14vh,150px); position:relative; }
.art-body .container{ max-width:720px; }

/* Lead with drop cap */
.art-lead{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.4vw,30px) !important; line-height:1.4 !important;
  color:var(--ink) !important; letter-spacing:-.01em; margin-bottom:40px !important;
}
.art-lead::first-letter{
  font-size:3.4em; font-weight:600; float:left; line-height:.82;
  margin:6px 14px 0 0; color:var(--accent);
}

/* Section headers with big serif numerals */
.art-body h2{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(26px,3vw,40px); letter-spacing:-.025em; line-height:1.08;
  margin:clamp(52px,7vh,80px) 0 20px; position:relative; padding-top:28px;
  border-top:1px solid var(--line);
}
.art-body h3{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2vw,25px); margin:36px 0 12px; color:var(--ink); }
.art-body p{ font-size:17px; line-height:1.75; color:var(--ink-soft); margin:0 0 20px; }
.art-body strong{ color:var(--ink); font-weight:600; }

/* Lists — refined */
.art-body ul{ margin:0 0 24px; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.art-body li{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); padding-left:32px; position:relative; }
.art-body li::before{
  content:''; position:absolute; left:0; top:9px; width:16px; height:2px;
  background:var(--accent); border-radius:2px;
}

/* Callouts — artistic */
.art-callout{
  position:relative; margin:36px 0; padding:28px 30px 28px 34px;
  background:linear-gradient(135deg, color-mix(in oklch,var(--accent) 7%,var(--paper)), color-mix(in oklch,var(--accent) 2%,var(--paper)));
  border-radius:8px; border:1px solid color-mix(in oklch,var(--accent) 18%,transparent);
  overflow:hidden;
}
.art-callout::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2,#c79a3f));
}
.art-callout .art-callout-k{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:10px; font-weight:600;
}
.art-callout p{ margin:0 !important; color:var(--ink) !important; font-size:16px !important; line-height:1.6 !important; }

/* Tables — editorial */
.art-table{ width:100%; border-collapse:collapse; margin:28px 0; font-size:15px; }
.art-table thead th{
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); text-align:left; padding:0 16px 14px; border-bottom:2px solid color-mix(in oklch,var(--accent) 30%,transparent);
}
.art-table td{ padding:16px; border-bottom:1px solid var(--line); color:var(--ink-soft); line-height:1.5; vertical-align:top; }
.art-table tbody tr:hover{ background:color-mix(in oklch,var(--accent) 4%,transparent); }
.art-table td:first-child{ font-weight:600; color:var(--ink); white-space:nowrap; }

.art-disclaimer{ font-size:13px !important; color:var(--mute) !important; border-top:1px solid var(--line); padding-top:26px; margin-top:56px !important; font-style:italic; line-height:1.6 !important; }

/* end mark */
.art-body .container::after{
  content:''; display:block; width:36px; height:36px; margin:56px auto 0;
  border:1.5px solid color-mix(in oklch,var(--accent) 40%,transparent);
  border-radius:50%; position:relative;
  background:radial-gradient(circle at center, var(--accent) 0 5px, transparent 5px);
}
@media(max-width:640px){
  .art-hero h1{ font-size:clamp(32px,9vw,44px); }
  .art-lead::first-letter{ font-size:2.8em; }
}