/* Article — lifted from prototypes/06-chapters/article.html, the design contract. */

.hero{position:relative;height:56svh;min-height:22rem;overflow:hidden;margin-bottom:clamp(2rem,6vh,3.5rem)}
.hero img{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;opacity:.6}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--ink) 2%,rgba(23,22,19,.4) 55%,rgba(23,22,19,.7))}
.hero .in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 var(--gut) clamp(2rem,6vh,3.5rem)}
.hero h1{font-weight:200;text-transform:uppercase;font-size:clamp(1.9rem,5.6vw,4.4rem);
  line-height:1;letter-spacing:-.045em;max-width:20ch;margin-top:.9rem}
.hero .meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.2rem}
.badge{display:inline-block;font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--bronze);border:1px solid rgba(176,138,94,.4);border-radius:999px;padding:.2rem .6rem}

article{max-width:38rem;margin:0 auto}
article .dek{font-weight:300;font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.45;
  color:var(--wash);letter-spacing:-.015em;padding-bottom:1.6rem;border-bottom:1px solid var(--line)}
article p{font-weight:300;font-size:1.06rem;line-height:1.78;color:#C4BFB5;margin-top:1.5rem}
article p:first-of-type{margin-top:1.8rem}
article h2{font-weight:200;text-transform:uppercase;font-size:clamp(1.15rem,2.4vw,1.7rem);
  letter-spacing:-.03em;line-height:1.1;margin-top:clamp(2.2rem,6vh,3.4rem);color:var(--wash)}
article h2 + p{margin-top:.9rem}
.player{position:relative;aspect-ratio:16/9;background:#000;margin:clamp(2rem,6vh,3.2rem) 0}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.credits{margin-top:clamp(2.5rem,7vh,4rem);border-top:1px solid var(--line);padding-top:1.6rem;
  display:flex;gap:clamp(1.2rem,4vw,3rem);flex-wrap:wrap}
.credits dt{font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.credits dd{font-weight:300;font-size:.92rem;margin-top:.3rem;line-height:1.6}
.back{display:inline-flex;gap:.5rem;margin-top:clamp(2.5rem,7vh,4rem);
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-lit);
  border-bottom:1px solid var(--line-2);padding-bottom:.3rem}
.kw{margin-top:2.5rem;color:#6E6960;font-size:.72rem;font-weight:300}