/* Elite Hockey Drills — Articles (hub + long-form reading) */
/* Layers on top of /assets/library.css (tokens, nav, footer, buttons, reveal). */

:root{
  --art-ink:#CBD0D8;      /* bright, readable body copy (no dim grey) */
  --art-ink-strong:#E6E8EC;
  --art-measure:43rem;    /* ~720px reading column */
}

/* ============================================================
   ARTICLE HERO
   ============================================================ */
.art-hero{
  position:relative;overflow:hidden;
  padding:128px 24px 56px;background:var(--bg);
}
.art-hero-glow{
  position:absolute;top:-28%;right:-12%;
  width:78vw;height:78vw;max-width:760px;
  background:radial-gradient(closest-side,rgba(93,180,229,.08) 0%,transparent 70%);
  pointer-events:none;filter:blur(40px);z-index:0;
}
.art-hero-grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 80px,rgba(93,180,229,.012) 80px,rgba(93,180,229,.012) 81px),
    repeating-linear-gradient(90deg,transparent,transparent 80px,rgba(93,180,229,.012) 80px,rgba(93,180,229,.012) 81px);
}
.art-hero-inner{position:relative;z-index:2;max-width:860px;}

/* breadcrumb */
.breadcrumb-list{
  list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.04em;color:var(--ink-3);margin-bottom:28px;
}
.breadcrumb-list li{display:flex;align-items:center;gap:8px;}
.breadcrumb-list li:not(:last-child)::after{content:"/";color:var(--line-2);}
.breadcrumb-list a{color:var(--ink-3);transition:color .2s;}
.breadcrumb-list a:hover{color:var(--ice);}
.breadcrumb-list li[aria-current]{color:var(--ink-2);}

.art-eyebrow{margin-bottom:18px;}
.art-title{
  font-size:clamp(40px,7.5vw,82px);line-height:.92;color:var(--ink);
  margin-bottom:22px;max-width:16ch;
}
.art-title .serif{color:var(--ice);}
.art-deck{
  font-size:clamp(17px,2.4vw,21px);line-height:1.55;color:var(--art-ink);
  max-width:54ch;font-weight:300;
}
.art-deck em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--ink);}

/* meta row: author · read time · science badge */
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:34px;padding-top:26px;border-top:1px solid var(--line);
}
.art-byline{display:flex;align-items:center;gap:12px;}
.art-avatar{
  width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--ice-line);background:var(--card-2);
}
.art-byline-name{font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.01em;}
.art-byline-role{font-size:11.5px;color:var(--ink-3);letter-spacing:.02em;margin-top:2px;}
.art-meta-dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3);}
.art-meta-item{font-size:12px;color:var(--ink-2);letter-spacing:.03em;display:inline-flex;align-items:center;gap:7px;}
.art-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ice);background:var(--ice-soft);
  border:1px solid var(--ice-line);border-radius:100px;padding:5px 12px;
}
.art-badge svg{width:12px;height:12px;}
@media(min-width:900px){.art-hero{padding:160px 40px 64px;}}

/* ============================================================
   ARTICLE BODY / PROSE
   ============================================================ */
.art-body{padding:8px 24px 40px;}
.art-prose{max-width:var(--art-measure);margin:0 auto;}
.art-prose > *{position:relative;}

.art-prose p{
  font-size:18px;line-height:1.78;color:var(--art-ink);
  margin:0 0 26px;
}
.art-prose p strong{color:var(--art-ink-strong);font-weight:600;}
.art-prose p em{font-style:italic;}
.art-prose a{
  color:var(--ice);text-decoration:none;
  border-bottom:1px solid var(--ice-line);
  transition:border-color .2s,color .2s;
}
.art-prose a:hover{color:#9ad2f1;border-bottom-color:var(--ice);}

/* lead paragraph */
.art-prose .lead{font-size:20px;line-height:1.7;color:var(--art-ink-strong);}

/* section headings */
.art-prose h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.01em;
  font-size:clamp(28px,4.2vw,40px);line-height:1.02;color:var(--ink);
  margin:56px 0 18px;padding-top:24px;
  scroll-margin-top:96px;
}
.art-prose h2::before{
  content:"";display:block;width:38px;height:2px;background:var(--ice);
  opacity:.85;margin-bottom:18px;
}
.art-prose h3{
  font-size:20px;font-weight:600;letter-spacing:.005em;color:var(--art-ink-strong);
  margin:36px 0 12px;scroll-margin-top:96px;
}
.art-prose h2 + h3{margin-top:20px;}

/* lists */
.art-prose ul,.art-prose ol{margin:0 0 26px;padding-left:0;list-style:none;}
.art-prose li{
  font-size:18px;line-height:1.7;color:var(--art-ink);
  position:relative;padding-left:30px;margin-bottom:13px;
}
.art-prose ul li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:7px;height:7px;border-radius:2px;
  background:var(--ice);transform:rotate(45deg);opacity:.9;
}
.art-prose ol{counter-reset:art-ol;}
.art-prose ol li{counter-increment:art-ol;}
.art-prose ol li::before{
  content:counter(art-ol);position:absolute;left:0;top:.05em;
  font-family:'Bebas Neue',sans-serif;font-size:15px;line-height:1.4;
  color:var(--ice);width:20px;text-align:center;
}
.art-prose li strong{color:var(--art-ink-strong);font-weight:600;}

/* ============================================================
   KEY TAKEAWAYS (top scannable box)
   ============================================================ */
.key-takeaways{
  max-width:var(--art-measure);margin:8px auto 44px;
  background:linear-gradient(180deg,rgba(93,180,229,.05),rgba(93,180,229,.015));
  border:1px solid var(--ice-line);border-radius:18px;
  padding:28px 30px 30px;
}
.key-takeaways .kt-head{
  display:flex;align-items:center;gap:10px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ice);margin-bottom:18px;
}
.key-takeaways ul{list-style:none;display:flex;flex-direction:column;gap:13px;}
.key-takeaways li{
  position:relative;padding-left:30px;
  font-size:15.5px;line-height:1.6;color:var(--art-ink);
}
.key-takeaways li::before{
  content:"";position:absolute;left:4px;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--ice);box-shadow:0 0 10px var(--ice);
}
.key-takeaways li strong{color:var(--art-ink-strong);font-weight:600;}

/* ============================================================
   TABLE OF CONTENTS ("In this guide")
   ============================================================ */
.art-toc{
  max-width:var(--art-measure);margin:0 auto 44px;
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:24px 28px;
}
.art-toc .toc-head{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:16px;
}
.art-toc ol{list-style:none;counter-reset:toc;display:grid;gap:10px;}
.art-toc li{counter-increment:toc;}
.art-toc a{
  display:flex;gap:12px;align-items:baseline;
  font-size:15px;color:var(--ink-2);transition:color .2s;
}
.art-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--ice);
  letter-spacing:.06em;flex:none;
}
.art-toc a:hover{color:var(--ink);}

/* ============================================================
   CALLOUT BOXES (age groups + notes)
   ============================================================ */
.callout{
  max-width:var(--art-measure);margin:30px auto 34px;
  border:1px solid var(--line-2);border-left:3px solid var(--ice);
  border-radius:0 14px 14px 0;background:var(--card-2);
  padding:22px 26px;
}
.callout .callout-tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ice);margin-bottom:10px;
}
.callout p{font-size:15.5px!important;line-height:1.65!important;color:var(--art-ink)!important;margin:0!important;}
.callout p + p{margin-top:12px!important;}
.callout--youth{border-left-color:var(--green);}
.callout--youth .callout-tag{color:var(--green);}
.callout--teen{border-left-color:var(--ice);}
.callout--teen .callout-tag{color:var(--ice);}
.callout--adult{border-left-color:var(--warm);}
.callout--adult .callout-tag{color:var(--warm);}
.callout--note{border-left-color:var(--ink-3);}
.callout--note .callout-tag{color:var(--ink-2);}

/* age-callout stack (3 side-by-side notes) */
.age-grid{max-width:var(--art-measure);margin:30px auto 36px;display:grid;gap:14px;}
.age-card{
  border:1px solid var(--line);border-top:2px solid var(--ice);
  border-radius:12px;background:var(--card);padding:20px 22px;
}
.age-card.is-youth{border-top-color:var(--green);}
.age-card.is-teen{border-top-color:var(--ice);}
.age-card.is-adult{border-top-color:var(--warm);}
.age-card h4{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.04em;
  font-size:20px;color:var(--ink);margin-bottom:8px;
}
.age-card.is-youth h4{color:var(--green);}
.age-card.is-adult h4{color:var(--warm);}
.age-card p{font-size:14.5px!important;line-height:1.6!important;color:var(--art-ink)!important;margin:0!important;}
@media(min-width:760px){.age-grid.cols-3{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   PULL QUOTE
   ============================================================ */
.pullquote{
  max-width:var(--art-measure);margin:40px auto;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:clamp(24px,3.6vw,32px);line-height:1.32;color:var(--ink);
  padding-left:26px;border-left:2px solid var(--warm);
}
.pullquote span{color:var(--ice);}

/* ============================================================
   DATA TABLE (summary / quick-reference)
   ============================================================ */
.art-table-wrap{max-width:var(--art-measure);margin:30px auto 36px;overflow-x:auto;}
.art-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:460px;}
.art-table caption{
  text-align:left;font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;
}
.art-table th,.art-table td{
  text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);
  color:var(--art-ink);vertical-align:top;line-height:1.5;
}
.art-table thead th{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ice);border-bottom-color:var(--ice-line);
}
.art-table tbody tr:hover{background:rgba(255,255,255,.018);}
.art-table td:first-child{color:var(--art-ink-strong);font-weight:600;}

/* ============================================================
   FIGURE / DIAGRAM
   ============================================================ */
.art-figure{max-width:var(--art-measure);margin:36px auto 38px;}
.art-figure svg{
  width:100%;height:auto;display:block;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:22px 20px;
}
.art-figure figcaption{
  font-size:13px;color:var(--ink-3);text-align:center;line-height:1.55;
  max-width:52ch;margin:14px auto 0;
}

/* ============================================================
   INLINE CTA (mid-article, soft)
   ============================================================ */
.art-inline-cta{
  max-width:var(--art-measure);margin:40px auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:18px 24px;
  background:var(--card);border:1px solid var(--line-2);border-radius:16px;
  padding:24px 26px;
}
.art-inline-cta .ic-text{flex:1;min-width:220px;}
.art-inline-cta h4{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;
  font-size:23px;color:var(--ink);margin-bottom:6px;line-height:1.05;
}
.art-inline-cta p{font-size:14px!important;line-height:1.55!important;color:var(--ink-2)!important;margin:0!important;}

/* ============================================================
   REFERENCES
   ============================================================ */
.references{max-width:var(--art-measure);margin:60px auto 0;padding-top:40px;border-top:1px solid var(--line);}
.references h2{
  font-family:'Bebas Neue',sans-serif;font-weight:400;letter-spacing:.02em;
  font-size:28px;color:var(--ink);margin-bottom:8px;
}
.references .ref-note{font-size:13px;color:var(--ink-3);margin-bottom:22px;line-height:1.6;}
.references ol{list-style:none;counter-reset:ref;display:flex;flex-direction:column;gap:14px;}
.references li{
  counter-increment:ref;position:relative;padding-left:34px;
  font-size:13.5px;line-height:1.6;color:var(--ink-2);
}
.references li::before{
  content:counter(ref);position:absolute;left:0;top:0;
  font-family:'Bebas Neue',sans-serif;font-size:13px;color:var(--ice);
  width:22px;height:22px;line-height:22px;text-align:center;
  border:1px solid var(--ice-line);border-radius:6px;
}
.references a{color:var(--ice);border-bottom:1px solid var(--ice-line);word-break:break-word;}
.references a:hover{color:#9ad2f1;}

/* ============================================================
   AUTHOR BIO
   ============================================================ */
.author-bio{
  max-width:var(--art-measure);margin:48px auto 0;
  display:flex;gap:20px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 28px;
}
.author-bio img{
  width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover;
  border:1px solid var(--ice-line);background:var(--card-2);
}
.author-bio .ab-name{font-size:16px;font-weight:600;color:var(--ink);margin-bottom:4px;}
.author-bio .ab-role{font-size:12px;letter-spacing:.04em;color:var(--ice);text-transform:uppercase;font-weight:600;margin-bottom:12px;}
.author-bio p{font-size:14.5px!important;line-height:1.65!important;color:var(--art-ink)!important;margin:0!important;}

/* ============================================================
   END CTA BLOCK (strong, to programs)
   ============================================================ */
.art-cta{position:relative;overflow:hidden;padding:80px 24px 90px;margin-top:70px;border-top:1px solid var(--line);}
.art-cta-glow{
  position:absolute;top:-40%;left:50%;transform:translateX(-50%);
  width:90vw;height:90vw;max-width:820px;
  background:radial-gradient(closest-side,rgba(232,183,119,.06) 0%,transparent 70%);
  pointer-events:none;filter:blur(40px);z-index:0;
}
.art-cta-inner{position:relative;z-index:2;max-width:680px;margin:0 auto;text-align:center;}
.art-cta-title{font-size:clamp(40px,7vw,68px);line-height:.96;color:var(--ink);margin-bottom:18px;}
.art-cta-title em{color:var(--ice);}
.art-cta-sub{font-size:16px;line-height:1.6;color:var(--art-ink);max-width:48ch;margin:0 auto 32px;}
.art-cta-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;}
.back-link{display:inline-block;margin-top:34px;font-size:13px;color:var(--ink-3);transition:color .2s;}
.back-link:hover{color:var(--ice);}

/* ============================================================
   RELATED ARTICLES
   ============================================================ */
.related-section{padding:64px 24px 16px;border-top:1px solid var(--line);}
.related-head{max-width:1240px;margin:0 auto 28px;}
.related-title{font-size:clamp(28px,5vw,42px);color:var(--ink);line-height:1;margin-top:8px;}
.related-grid{max-width:1240px;margin:0 auto;display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:760px){.related-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1040px){.related-grid{grid-template-columns:repeat(3,1fr);}}

/* ============================================================
   ARTICLES HUB (index)
   ============================================================ */
.hub-grid{
  max-width:1240px;margin:0 auto;padding:0 24px 90px;
  display:grid;gap:18px;grid-template-columns:1fr;
}
@media(min-width:720px){.hub-grid{grid-template-columns:repeat(2,1fr);padding:0 40px 90px;}}
@media(min-width:1080px){.hub-grid{grid-template-columns:repeat(3,1fr);}}

.art-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 24px;min-height:230px;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s;
}
.art-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--ice);opacity:.25;transition:opacity .35s;
}
.art-card:hover{transform:translateY(-5px);border-color:var(--ice-line);
  box-shadow:0 22px 44px -16px rgba(0,0,0,.6),0 0 50px rgba(93,180,229,.06);}
.art-card:hover::before{opacity:.9;}
.art-card-cat{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:14px;}
.art-card-cat.is-warm{color:var(--warm);}
.art-card-cat.is-green{color:var(--green);}
.art-card-title{font-size:clamp(22px,3vw,27px);line-height:1.06;color:var(--ink);margin-bottom:12px;}
.art-card-desc{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:20px;flex:1;}
.art-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);}
.art-card-read{font-size:11.5px;letter-spacing:.04em;color:var(--ink-3);}
.art-card-arrow{color:var(--ink-3);transition:transform .35s cubic-bezier(.2,.7,.2,1),color .25s;}
.art-card:hover .art-card-arrow{transform:translateX(5px);color:var(--ice);}

/* hub hero reuse */
.hub-hero{padding:128px 24px 56px;position:relative;overflow:hidden;}
.hub-hero-inner{position:relative;z-index:2;max-width:900px;}
.hub-title{font-size:clamp(56px,12vw,108px);line-height:.9;margin-bottom:16px;}
.hub-title .serif{color:var(--ice);}
.hub-sub{font-size:16px;line-height:1.6;color:var(--art-ink);max-width:52ch;}
@media(min-width:900px){.hub-hero{padding:160px 40px 64px;}}

/* hub card thumbnails (magazine treatment) */
.art-card.has-thumb{padding:0;}
.art-card.has-thumb .art-card-thumb{
  height:178px;background-size:cover;background-position:center;
  border-bottom:1px solid var(--line);
}
.art-card.has-thumb .art-card-body{display:flex;flex-direction:column;flex:1;padding:24px 24px 22px;}

/* featured (first) hub card spans full width on wide screens */
@media(min-width:1080px){
  .art-card.is-featured{grid-column:1 / -1;}
  .art-card.is-featured.has-thumb{flex-direction:row;align-items:stretch;}
  .art-card.is-featured.has-thumb .art-card-thumb{width:46%;height:auto;min-height:330px;border-bottom:none;border-right:1px solid var(--line);}
  .art-card.is-featured.has-thumb .art-card-body{justify-content:center;padding:44px 48px;}
  .art-card.is-featured .art-card-title{font-size:clamp(28px,3.4vw,40px);max-width:18ch;}
  .art-card.is-featured .art-card-desc{font-size:15.5px;max-width:62ch;}
}

/* article hero with background photo */
.art-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 25%;}
.art-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg, var(--bg) 4%, rgba(7,7,8,.82) 44%, rgba(7,7,8,.42) 100%),
    linear-gradient(0deg, var(--bg) 1%, rgba(7,7,8,0) 48%);
}
@media(min-width:900px){.art-hero.has-photo{padding-bottom:72px;}}

/* ===== MOBILE: phone-native diagrams + hero crop fix ===== */
/* desktop hides the mobile chart; phones swap to it */
.art-figure svg.fig-mobile{display:none;}
@media(max-width:640px){
  .art-figure svg:not(.fig-mobile){display:none;}
  .art-figure svg.fig-mobile{display:block;}
}
/* on phones the wide hero photo is heavily cropped, so darken vertically (bottom-heavy) instead of left-to-right so the headline stays readable over whatever shows */
@media(max-width:760px){
  .art-hero.has-photo .art-hero-bg{background-position:center;}
  .art-hero.has-photo .art-hero-bg::after{
    background:linear-gradient(180deg, rgba(7,7,8,.55) 0%, rgba(7,7,8,.72) 52%, rgba(7,7,8,.93) 100%);
  }
}

/* ============================================================
   NEWSLETTER CAPTURE (under each article)
   ============================================================ */
.art-news{position:relative;padding:60px 24px 76px;border-top:1px solid var(--line);}
.art-news-card{
  position:relative;overflow:hidden;max-width:640px;margin:0 auto;
  background:linear-gradient(180deg,var(--card-2) 0%,var(--card) 100%);
  border:1px solid var(--ice-line);border-radius:22px;
  padding:46px 36px 38px;text-align:center;
}
.art-news-card::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 0%,var(--ice) 50%,transparent 100%);
  background-size:220% 100%;opacity:.6;animation:newsShimmer 7s linear infinite;}
@keyframes newsShimmer{to{background-position:-220% 0;}}
.art-news-glow{position:absolute;top:-65%;left:50%;transform:translateX(-50%);
  width:130%;height:130%;background:radial-gradient(closest-side,rgba(93,180,229,.10),transparent 70%);
  pointer-events:none;animation:newsGlowPulse 7s ease-in-out infinite;}
@keyframes newsGlowPulse{0%,100%{opacity:.6;}50%{opacity:1;}}
.art-news-card > *:not(.art-news-glow):not(.news-confetti){position:relative;z-index:1;}
.art-news-eyebrow{margin-bottom:14px;}
.art-news-title{font-size:clamp(30px,5.4vw,44px);line-height:1.02;color:var(--ink);margin-bottom:14px;}
.art-news-title em{color:var(--ice);}
.art-news-sub{font-size:15.5px;line-height:1.6;color:var(--art-ink);max-width:44ch;margin:0 auto 26px;}
.art-news-form{max-width:440px;margin:0 auto;}
.art-news-fields{display:flex;flex-direction:column;gap:11px;margin-bottom:11px;}
.art-news-input{
  width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:100px;padding:16px 24px;color:var(--ink);font-size:15.5px;font-family:inherit;
  outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .25s,background .25s,box-shadow .25s,transform .25s;
}
.art-news-input::placeholder{color:#8d93a0;}
.art-news-input:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.085);}
.art-news-input:focus{
  border-color:var(--ice);background:rgba(255,255,255,.10);
  box-shadow:0 0 0 4px rgba(93,180,229,.14),0 10px 26px -12px rgba(93,180,229,.30);
  transform:translateY(-1px);
}
.art-news-btn{width:100%;}
.news-spinner{width:16px;height:16px;border:2px solid rgba(232,183,119,.35);border-top-color:#E8B777;
  border-radius:50%;animation:newsSpin .7s linear infinite;display:none;}
.art-news-btn.loading .btn-label{opacity:.5;}
.art-news-btn.loading .news-spinner{display:inline-block;}
@keyframes newsSpin{to{transform:rotate(360deg);}}
.art-news-note{font-size:12px;color:var(--ink-3);line-height:1.5;margin-top:14px;}
.art-news-msg{font-size:13.5px;line-height:1.5;margin-top:12px;min-height:18px;font-weight:500;}
.art-news-msg.ok{color:var(--green);}
.art-news-msg.err{color:#E2787A;}
@media(min-width:560px){
  .art-news-fields{flex-direction:row;}
  .art-news-input{flex:1;min-width:0;}
}

/* ---- success state + delight ---- */
.art-news-success{text-align:center;animation:newsSuccessIn .55s cubic-bezier(.16,1,.3,1);}
@keyframes newsSuccessIn{from{opacity:0;transform:translateY(10px) scale(.985);}to{opacity:1;transform:none;}}
.news-check{width:78px;height:78px;margin:4px auto 22px;}
.news-check svg{width:100%;height:100%;display:block;overflow:visible;}
.news-check .nc-ring{fill:none;stroke:var(--ice);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:201;stroke-dashoffset:201;animation:ncRing .65s cubic-bezier(.65,0,.35,1) .05s forwards;
  filter:drop-shadow(0 0 6px rgba(93,180,229,.5));}
.news-check .nc-tick{fill:none;stroke:var(--warm);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:50;stroke-dashoffset:50;animation:ncTick .4s cubic-bezier(.65,0,.35,1) .55s forwards;}
@keyframes ncRing{to{stroke-dashoffset:0;}}
@keyframes ncTick{to{stroke-dashoffset:0;}}
.news-success-title{font-size:clamp(36px,6.4vw,54px);line-height:1;color:var(--ink);margin-bottom:12px;}
.news-success-sub{font-size:15.5px;line-height:1.6;color:var(--art-ink);max-width:40ch;margin:0 auto;}
/* confetti (contained inside the card) */
.news-confetti{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;border-radius:22px;}
.news-confetti i{position:absolute;top:-12px;width:8px;height:8px;border-radius:2px;opacity:0;
  animation:confFall var(--d,1.6s) var(--delay,0s) ease-in forwards;}
@keyframes confFall{
  0%{opacity:0;transform:translateY(-12px) rotate(0deg);}
  12%{opacity:1;}
  100%{opacity:0;transform:translateY(var(--fall,300px)) rotate(var(--rot,360deg));}
}
@media(prefers-reduced-motion:reduce){
  .art-news-card::before,.art-news-glow{animation:none;}
  .news-check .nc-ring,.news-check .nc-tick{animation:none;stroke-dashoffset:0;}
  .news-confetti{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .art-card{transition:border-color .35s,box-shadow .35s!important;}
}