/* =========================================================
   DYNASTY CREATIVE - Editorial pages
   Articles hub, single articles, legal pages.
   Built on styles.css tokens; nothing text-bearing is absolutely positioned.
   ========================================================= */
main{background:var(--cream);color:var(--ink)}
.pk{color:var(--pink)}

/* ---------- shared meta ---------- */
.art-cat{background:var(--lime);color:var(--ink);padding:3px 8px;font-weight:700}
.art-meta,.ac-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}

/* ---------- ARTICLES HUB ---------- */
.hub-head{background:var(--ink);color:var(--cream);padding:clamp(120px,13vw,170px) 0 clamp(56px,7vw,90px)}
.hub-head h1{font-size:clamp(64px,13vw,210px);line-height:.84;margin-top:22px}
.hub-head p{max-width:46ch;margin-top:clamp(18px,2vw,28px);font-size:clamp(16.5px,1.3vw,20px);color:rgba(247,243,235,.85)}
.hub{padding:clamp(56px,7vw,100px) 0 clamp(80px,9vw,130px)}

.ac{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--cream);border:3px solid var(--ink);transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;box-shadow:0 0 0 var(--ink)}
.ac:hover,.ac:focus-visible{transform:translate(-5px,-5px);box-shadow:10px 10px 0 var(--ink)}
.ac-img{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:3px solid var(--ink);background:var(--ink)}
.ac-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.ac:hover .ac-img img{transform:scale(1.04)}
.ac-tx{display:flex;flex-direction:column;gap:14px;padding:clamp(20px,2.4vw,32px);flex:1}
.ac h3{font-size:clamp(24px,2.3vw,36px);line-height:.95;text-wrap:balance}
.ac p{font-size:15.5px;line-height:1.5;opacity:.85;text-wrap:pretty}
.ac-go{margin-top:auto;padding-top:6px;display:inline-flex;gap:6px;align-items:center;font-weight:700}
.ac:hover .ac-go{color:var(--pink)}

.ac-lead{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);margin-bottom:clamp(28px,3.4vw,48px)}
.ac-lead .ac-img{aspect-ratio:auto;min-height:clamp(300px,34vw,520px);border-bottom:0;border-right:3px solid var(--ink)}
.ac-lead .ac-tx{justify-content:center;padding:clamp(26px,3.4vw,52px)}
.ac-lead h3{font-size:clamp(32px,3.6vw,60px)}
.ac-lead p{font-size:clamp(15.5px,1.2vw,18px)}

.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.hub-grid .ac:nth-child(2){background:var(--lime)}
.hub-grid .ac:nth-child(2) .art-cat{background:var(--ink);color:var(--lime)}

/* ---------- SINGLE ARTICLE ---------- */
.art-head{background:var(--ink);color:var(--cream);padding:clamp(110px,12vw,150px) 0 clamp(120px,14vw,190px)}
.art-back{display:inline-flex;text-decoration:none;margin-bottom:clamp(22px,3vw,34px);opacity:.8}
.art-back:hover{opacity:1;color:var(--lime)}
.art-head h1{font-size:clamp(38px,5.6vw,92px);line-height:.92;max-width:22ch;margin-top:clamp(16px,2vw,24px);text-wrap:balance}
.art-lede{max-width:62ch;margin-top:clamp(20px,2.4vw,32px);font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:rgba(247,243,235,.88)}
.art-lede em{font-style:italic}

.art-media{margin-top:clamp(-150px,-11vw,-90px)}
.art-hero{border:3px solid var(--ink);background:var(--ink);box-shadow:10px 10px 0 var(--pink)}
.art-hero img{width:100%;max-height:72vh;object-fit:cover}
.art-hero figcaption{background:var(--ink);color:rgba(247,243,235,.75);padding:10px 14px;font-size:10.5px}
#main .art-media .art-hero[data-square]{max-width:620px}

.art-body{max-width:72ch;margin:0 auto;padding:clamp(48px,6vw,84px) 0 clamp(60px,7vw,100px);font-size:clamp(17px,1.25vw,19.5px);line-height:1.68}
.art-body > * + *{margin-top:1.1em}
.art-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.2vw,48px);line-height:.95;margin-top:1.6em}
.art-body h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.4vw,36px);line-height:.98;margin-top:1.8em;padding-top:.7em;border-top:3px solid var(--ink)}
.art-body h3 strong{font-weight:400}
.art-body p strong{font-weight:700}
.art-body blockquote{margin-left:0;padding:.15em 0 .15em clamp(16px,2vw,24px);border-left:4px solid var(--pink);font-size:.97em}
.art-body blockquote + blockquote{margin-top:.75em}
.art-body a{color:var(--ink);text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.art-body ul,.art-body ol{padding-left:1.3em}
.art-body li + li{margin-top:.35em}

.art-next{background:var(--pink);border-top:3px solid var(--ink);padding:clamp(40px,5vw,70px) 0}
.art-next-in{display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.art-next-card{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:var(--ink);max-width:40ch}
.art-next-card b{font-weight:400;font-size:clamp(28px,3.4vw,52px);line-height:.92}
.art-next-card:hover b{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}

/* ---------- LEGAL ---------- */
.legal{padding:clamp(120px,12vw,160px) 0 clamp(80px,9vw,130px)}
.legal-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(28px,3.4vw,44px)}
.legal-tabs a{text-decoration:none;border:2px solid var(--ink);border-radius:99px;padding:8px 14px}
.legal-tabs a:hover{background:var(--ink);color:var(--cream)}
.legal-tabs a[aria-current="page"]{background:var(--ink);color:var(--lime)}
.legal h1{font-size:clamp(52px,9vw,150px);line-height:.86}
.legal-upd{margin-top:16px;opacity:.7}
.legal-body{max-width:76ch;margin-top:clamp(36px,4.4vw,60px);font-size:clamp(16px,1.15vw,18px);line-height:1.65}
.legal-body > * + *{margin-top:1em}
.legal-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.6vw,40px);line-height:1;margin-top:2em;padding-top:.8em;border-top:3px solid var(--ink)}
.legal-body h3{font-family:var(--body);font-weight:700;font-size:1.08em;margin-top:1.6em}
.legal-body ul{padding-left:1.25em}
.legal-body li + li{margin-top:.3em}
.legal-body a{color:var(--ink);text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-body strong{font-weight:700}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .ac-lead{grid-template-columns:1fr}
  .ac-lead .ac-img{min-height:0;aspect-ratio:16/10;border-right:0;border-bottom:3px solid var(--ink)}
  .hub-grid{grid-template-columns:1fr}
}
@media (max-width: 620px){
  .art-hero{box-shadow:6px 6px 0 var(--pink)}
  .art-media{margin-top:-70px}
  .art-head{padding-bottom:110px}
}