/* Article pages — reading layout on top of styles.css */

body.art{font-size:17.5px}

.wrap{
  max-width:720px; width:100%; margin:0 auto; padding:0 22px;
  flex:1;
}
article{padding:7vh 0 2vh}

.eyebrow{
  text-transform:uppercase; letter-spacing:.16em; font-size:.72rem;
  color:var(--accent); margin:0 0 .6em; font-weight:600;
}
article h1{
  font-size:clamp(1.85rem,4.6vw,2.7rem); line-height:1.12; letter-spacing:-.03em;
  margin:0 0 .4em; font-weight:660;
}
.meta{color:var(--muted); font-size:.84rem; margin:0 0 2em}
.meta a{color:var(--muted)}

article .lede{font-size:1.13rem; color:#cbd4ea; margin:0 0 2em}

article h2{
  font-size:clamp(1.25rem,3vw,1.55rem); letter-spacing:-.02em;
  margin:2.4em 0 .6em; padding-top:.2em;
}
article h3{font-size:1.06rem; margin:1.8em 0 .4em}
article p{margin:0 0 1.05em; color:#c6cee4}
article ul,article ol{margin:0 0 1.2em; padding-left:1.25em; color:#c6cee4}
article li{margin-bottom:.45em}
article strong{color:#f1f5ff}

article a{color:#9adcff; text-decoration:none; border-bottom:1px solid rgba(154,220,255,.28)}
article a:hover{border-bottom-color:rgba(154,220,255,.7)}

article table{
  width:100%; border-collapse:collapse; margin:0 0 1.4em; font-size:.94rem;
  display:block; overflow-x:auto;
}
article th,article td{
  border-bottom:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top;
}
article th{color:#e9eefb; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em}

.cta{margin:1.1em 0 1.6em}
.cta .btn{font-size:.94rem}

article details{
  border-top:1px solid var(--line); padding:14px 0;
}
article summary{cursor:pointer; font-weight:600; color:#e9eefb}
article details p{margin:.6em 0 0; color:#aeb8d2}

/* ---------- editorial upgrade: hero, TL;DR, TOC, pull quote, CTA card ---------- */

/* gradient band behind the article header */
article{position:relative}
article::before{
  content:""; position:absolute; left:50%; top:-2vh; transform:translateX(-50%);
  width:100vw; height:min(52vh,420px); z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 80% at 22% 0%, rgba(56,189,248,.16), transparent 70%),
    radial-gradient(50% 70% at 82% 8%, rgba(167,139,250,.14), transparent 72%);
}

article h1{font-size:clamp(2rem,5.2vw,3.05rem); line-height:1.08; margin-bottom:.35em}

/* meta row becomes a chip bar */
.art article > .meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding-bottom:20px; margin-bottom:2.4rem; border-bottom:1px solid var(--line);
}
.art .meta .chip{
  border:1px solid var(--line); border-radius:999px; padding:3px 10px;
  font-size:.76rem; color:var(--muted); letter-spacing:.02em;
}

/* hero photograph */
.hero{margin:0 0 2.4rem}
.hero img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:20px; border:1px solid var(--line);
  box-shadow:0 26px 60px rgba(0,0,0,.38);
}
@media (max-width:560px){ .hero img{border-radius:14px} }

/* TL;DR */
.tldr{
  border:1px solid rgba(125,211,252,.28); background:rgba(125,211,252,.055);
  border-radius:16px; padding:18px 22px; margin:0 0 2.2rem;
}
.tldr-label{
  margin:0 0 .55em; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:700; font-family:"Helvetica Neue",Arial,sans-serif;
}
.tldr ul{margin:0; padding-left:1.15em}
.tldr li{margin-bottom:.42em; font-size:.95rem; color:#cfd7ea}
.tldr li:last-child{margin-bottom:0}

/* TOC */
.toc{border-left:2px solid var(--line); padding:2px 0 2px 18px; margin:0 0 2.6rem}
.toc-label{margin:0 0 .6em; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700}
.toc ol{list-style:none; margin:0; padding:0; counter-reset:toc}
.toc li{counter-increment:toc; margin:0 0 .4em; font-size:.93rem}
.toc li a{color:var(--muted); text-decoration:none; border:0}
.toc li a::before{content:counter(toc,decimal-leading-zero) "  "; color:var(--accent); font-variant-numeric:tabular-nums}
.toc li a:hover{color:var(--ink)}

/* section headings get a subtle accent rule */
article h2{padding-bottom:.35em; border-bottom:1px solid var(--line)}
article h2::after{
  content:""; display:block; width:34px; height:2px; margin-top:-1px;
  background:linear-gradient(90deg,var(--accent),rgba(167,139,250,.9));
}

/* pull quote */
.pull{
  margin:2.2rem 0; padding:22px 26px; border-radius:18px;
  background:linear-gradient(135deg, rgba(125,211,252,.12), rgba(167,139,250,.10));
  font:italic 400 1.14rem/1.55 Georgia,serif; color:#eaf1ff;
}
.pull p{margin:0; color:inherit}

/* CTA card */
.cta-card{
  margin:2.6rem 0; padding:22px 24px; border-radius:20px;
  border:1px solid rgba(125,211,252,.22); background:rgba(255,255,255,.035);
}
.cta-card .craft{font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 .5em; font-weight:700}
.cta-card h2{margin:0 0 .4em; font-size:1.25rem; border:0; padding:0}
.cta-card h2::after{display:none}
.cta-card p{margin:0 0 1em; color:#c6cee4; font-size:.96rem}
.cta-card .btn{font-size:.9rem}

/* table polish */
article tbody tr:hover td{background:rgba(125,211,252,.055)}
article table caption{caption-side:bottom; padding-top:8px; font-size:.78rem; color:var(--muted); text-align:left}

/* tables get roomier on wide screens */
@media (min-width:720px){
  article table{display:table}
  article th,article td{padding:12px 14px}
}

@media (max-width:560px){
  article{padding-top:4vh}
  body.art{font-size:16.5px}
  .art article > .meta{margin-bottom:1.8rem}
  .pull{font-size:1.02rem; padding:18px 20px}
}