/* artnet news article — Marina Abramović × Spencer Pratt */

:root{
  --artnet-red:#e8230d;
  --ink:#111;
  --ink-soft:#333;
  --muted:#6b6b6b;
  --rule:#e6e6e6;
  --bg:#ffffff;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4','Source Serif Pro','Times New Roman',Times,serif;
  --max:1440px;
  --pad:48px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
body{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

/* ── header ──────────────────────────────────────────────────────── */
.site-header{border-bottom:1px solid var(--rule);background:#fff}
.site-header__inner{
  max-width:var(--max);
  margin:0 auto;
  padding:18px var(--pad);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:48px;
}

.logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);line-height:1}
.logo__art{
  display:block;
  height:30px;
  width:auto;
}
.logo__news{
  color:var(--ink);
  font-weight:800;
  font-size:30px;
  letter-spacing:-0.02em;
  position:relative;
  top:1px;
}

.primary-nav ul{
  display:flex;
  justify-content:center;
  gap:42px;
  list-style:none;
  margin:0;padding:0;
}
.primary-nav a{
  font-size:15px;
  color:var(--ink-soft);
  font-weight:400;
  letter-spacing:.01em;
}
.primary-nav a:hover{color:var(--artnet-red)}

.header-tools{display:flex;align-items:center;gap:18px;color:var(--ink-soft)}
.follow{
  background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  font:inherit;font-size:14px;color:var(--ink-soft);
  padding:4px 2px;
}
.icon-btn{
  background:none;border:0;cursor:pointer;
  color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px;
}
.icon-btn:hover,.follow:hover{color:var(--artnet-red)}

/* ── article ─────────────────────────────────────────────────────── */
.article{
  max-width:var(--max);
  margin:0 auto;
  padding:28px var(--pad) 80px;
}

.article__meta{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.01em;
  margin-bottom:36px;
}
.article__section{color:var(--ink-soft);font-weight:500}
.article__dot{margin:0 6px}

.article__title{
  font-family:var(--serif);
  font-weight:600;
  font-size:46px;
  line-height:1.15;
  letter-spacing:-0.005em;
  text-align:center;
  margin:0 auto 18px;
  max-width:1180px;
  color:var(--ink);
}

.article__dek{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.5;
  color:#5a5a5a;
  text-align:center;
  max-width:880px;
  margin:0 auto 28px;
}

.article__byline{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  font-size:14px;
  color:var(--ink-soft);
  border-bottom:1px solid var(--rule);
  padding-bottom:22px;
  margin-bottom:30px;
}
.article__byline a{text-decoration:underline;text-underline-offset:3px}
.share{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.share a{
  width:30px;height:30px;border-radius:50%;
  background:#f0f0f0;color:#555;
  display:inline-flex;align-items:center;justify-content:center;
}
.share a:hover{background:#e3e3e3;color:#000}

/* hero photo + caption (full-width above body columns) */
.article__hero{margin:0 0 14px}
.article__hero img{
  width:100%;
  max-width:760px;
  height:auto;
  display:block;
}
.article__hero figcaption{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
  max-width:760px;
}

/* body layout: photo floats left so lead paragraphs wrap to its right */
.article__body{position:relative}
.article__body > .article__hero{
  width:760px;
  max-width:100%;
  float:left;
  margin:0 40px 18px 0;
}
.lead-grid > p{
  font-family:var(--sans);
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  margin:0 0 16px;
}

/* three column section below */
.columns{
  clear:both;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:48px;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--rule);
}
.columns h2{
  font-family:var(--sans);
  font-size:17px;
  font-weight:700;
  margin:0 0 14px;
  color:var(--ink);
}
.columns p{
  font-size:14.5px;
  line-height:1.65;
  margin:0 0 14px;
  color:var(--ink);
}

.article__kicker{
  border-top:1px solid var(--rule);
  margin-top:36px;
  padding-top:26px;
  font-size:15px;
  line-height:1.65;
  text-align:center;
  max-width:1080px;
  margin-left:auto;margin-right:auto;
  color:var(--ink);
}

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width:1100px){
  .primary-nav ul{gap:26px}
  .article__title{font-size:38px}
  .article__body > .article__hero{width:100%;float:none;margin:0 0 18px}
  .columns{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:720px){
  :root{--pad:20px}
  .site-header__inner{grid-template-columns:auto auto;gap:16px}
  .primary-nav{display:none;grid-column:1/-1}
  .article__title{font-size:30px}
  .article__dek{font-size:15px}
  .columns{grid-template-columns:1fr}
}