/* TM CMS page */
/* ===== NEWS ARTICLE (dynamic /news/[newsSlug]) — scoped under .mint-article =====
   Renders every News-collection article body: blog posts (p.lead + p/h2 + figures),
   plain-prose interviews (Elle/Ian: p/h2), and Q&A interviews (Justin: .art-lead/.qa/.q/.a).
   Q&A + lead rules are scoped to beat the generic .art-body p/h2 element rules. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@700;800;900&display=swap');

.mint-article{padding-bottom:clamp(48px,6vw,96px);font-family:'Inter',system-ui,sans-serif}
.mint-article .art-topbar{max-width:1120px;margin:0 auto;padding:clamp(18px,2.4vw,30px) 32px 0}
.mint-article .art-topbar .back-link{margin:0}
.mint-article .art-hero{max-width:1120px;margin:0 auto;padding:clamp(18px,2.4vw,28px) 32px 0}
.mint-article .frame{border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#1b1b1b}
.mint-article .art-hero .frame{box-shadow:0 26px 70px rgba(0,0,0,.5)}
.mint-article img{width:100%;height:100%;object-fit:cover;display:block}
.mint-article .art-col{max-width:760px;margin:0 auto;padding:clamp(30px,4vw,56px) 32px 0}
.mint-article .art-date{color:var(--green);font-weight:700;font-size:clamp(12px,1vw,14px);letter-spacing:.16em;text-transform:uppercase;margin-bottom:clamp(14px,1.4vw,20px)}
.mint-article .art-date:empty{display:none}
.mint-article .art-title{font-family:'Montserrat',sans-serif;font-weight:800;text-transform:uppercase;color:#fff;font-size:clamp(30px,3.4vw,50px);line-height:1.05;letter-spacing:-.01em;margin:0 0 clamp(10px,1.2vw,16px)}
/* ---- byline: "by <Author>" under the title (from written_by) ---- */
.mint-article .art-byline{color:#b9beb9;font-size:clamp(13px,1.05vw,15px);font-weight:600;letter-spacing:.02em;margin:0 0 clamp(24px,2.6vw,34px)}
.mint-article .art-byline .by-name{color:#fff}
.mint-article .art-byline:empty{display:none}
.mint-article .art-body{max-width:720px}

/* ---- generic body (blog posts + plain-prose interviews) ---- */
.mint-article .art-body .lead{color:#d4dad5;font-size:clamp(16px,1.35vw,20px);line-height:1.6;margin:0 0 clamp(20px,2vw,28px)}
.mint-article .art-body p{color:#a7a7a7;font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.8;margin:0 0 clamp(15px,1.5vw,20px)}
.mint-article .art-body h2{font-family:'Montserrat',sans-serif;font-weight:800;color:#fff;font-size:clamp(19px,1.7vw,25px);line-height:1.2;letter-spacing:-.005em;margin:clamp(34px,3.6vw,50px) 0 clamp(12px,1.2vw,16px)}
.mint-article .art-body em{font-style:italic}
.mint-article .art-body a{color:#fff;border-bottom:1px solid rgba(25,231,131,.5);transition:color .15s,border-color .15s}
.mint-article .art-body a:hover{color:var(--green);border-color:var(--green)}
/* bare inline images inside prose (e.g. Elle's photo) render at natural height */
.mint-article .art-body p img{height:auto;border-radius:16px;margin:clamp(20px,2.5vw,32px) 0}

/* ---- Q&A interview (Justin): scoped to outrank the generic rules above ---- */
.mint-article .art-body .art-lead{color:#d4dad5;font-size:clamp(16px,1.35vw,20px);line-height:1.55;margin:0 0 clamp(26px,3vw,42px)}
.mint-article .name-link{color:#fff;font-weight:600;border-bottom:1px solid rgba(25,231,131,.5);transition:color .15s,border-color .15s}
.mint-article .name-link:hover{color:var(--green);border-color:var(--green)}
.mint-article .art-body .qa{max-width:720px}
.mint-article .qa .q{font-family:'Inter',system-ui,sans-serif;font-weight:700;text-transform:none;color:#fff;font-size:clamp(16px,1.25vw,19px);line-height:1.4;letter-spacing:0;margin:clamp(30px,3.2vw,44px) 0 clamp(11px,1.2vw,15px)}
.mint-article .qa .q:first-child{margin-top:0}
.mint-article .qa .a{color:#a7a7a7;font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.78;margin:0 0 clamp(14px,1.4vw,18px)}
.mint-article .qa .a .spk{color:var(--green);font-weight:700;margin-right:5px}

/* ---- inline figures (both conventions) ---- */
.mint-article .art-fig{margin:clamp(30px,3.6vw,48px) 0}
.mint-article .art-fig .frame{border-radius:16px}
.mint-article .art-fig figcaption{color:var(--dimmer);font-size:12px;margin-top:10px;letter-spacing:.02em}

/* ---- image fallback frame ---- */
.mint-article .frame.img-fallback{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d1d1d,#0e0e0e)}
.mint-article .frame.img-fallback::after{content:attr(data-label);color:#6b6b6b;font-size:12px;letter-spacing:.14em;text-transform:uppercase}

@media(max-width:600px){.mint-article .art-topbar,.mint-article .art-hero,.mint-article .art-col{padding-left:20px;padding-right:20px}}