/* News article pages (news-*.html), same visual language as news.html / alumni.html */
.na-page { --na-ink: #1d1f24; --na-muted: #5b6070; --na-line: #e3e6ee; --na-bg: #f5f6fa; --na-card: #ffffff; --na-accent: #ee8a00;
           background: var(--na-bg); color: var(--na-ink); font-family: 'Jost', 'Prompt', sans-serif; padding-bottom: 4rem; }
.na-wrap { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.na-hero { background: #1d1f24 radial-gradient(circle at 85% 20%, rgba(101,146,230,.35), transparent 55%); color: #fff; padding: 9rem 0 5.5rem; }
.na-back { display: inline-flex; align-items: center; gap: .4rem; color: #d5d8e0 !important; font-size: .95rem; text-decoration: none !important; margin-bottom: 1.5rem; }
.na-back::before { content: "←"; }
.na-back:hover { color: #fff !important; }
.na-eyebrow { color: var(--na-accent); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; margin: 0 0 .5rem; }
.na-title { font-size: clamp(1.8rem, 4.5vw, 3rem); font-weight: 600; line-height: 1.25; margin: 0 0 1.5rem; color: #fff; max-width: 52rem; }
.na-meta { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); }
.na-meta dt { font-weight: 600; font-size: .75rem; letter-spacing: .06em; color: #aab3c5; text-transform: uppercase; }
.na-meta dd { margin: 0; font-size: 1rem; font-weight: 500; color: #fff; }
.na-cover { margin: -3.5rem 0 0; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(20,24,40,.15); background: #000; }
.na-cover img { width: 100%; display: block; }
.na-cover figcaption, .na-video figcaption { background: var(--na-card); color: var(--na-muted); font-size: .9rem; padding: .7rem 1rem; }
.na-video .na-frame { position: relative; padding-top: 56.25%; }
/* a video used as the article cover: same overlap/rounding as .na-cover */
.na-wrap > .na-video { margin: -3.5rem 0 0; position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(20,24,40,.15); background: #000; }
.na-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.na-body { background: var(--na-card); border: 1px solid var(--na-line); border-radius: 16px; padding: 2rem; margin-top: 1.5rem; }
.na-body p { font-size: 1.08rem; line-height: 1.9; margin: 0 0 1rem; color: var(--na-ink); }
.na-body p:last-child { margin-bottom: 0; }
.na-body p:first-child { font-size: 1.2rem; font-weight: 500; }
.na-body a { color: var(--na-accent); }
.na-section { margin-top: 3rem; }
.na-h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); font-weight: 600; margin: 0 0 1.25rem; color: var(--na-ink); }
.na-feature { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; background: var(--na-card);
              border: 1px solid var(--na-line); border-radius: 16px; padding: 1.25rem; margin-bottom: 1.25rem; }
.na-feature:nth-of-type(even) .na-shot { order: 2; }
.na-feature p { margin: 0; font-size: 1.02rem; line-height: 1.85; color: var(--na-ink); }
.na-shot { display: block; border-radius: 12px; overflow: hidden; background: #e7ecf8; cursor: zoom-in; }
.na-shot img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 3 / 2; transition: transform .4s; }
.na-shot:hover img { transform: scale(1.03); }
.na-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; }
.na-stores { display: flex; flex-wrap: wrap; gap: .75rem; }
.na-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .7rem 1.4rem; border-radius: 10px; font-size: 1rem; font-weight: 500;
          text-decoration: none !important; border: 1px solid var(--na-ink); color: var(--na-ink) !important; background: var(--na-card); }
.na-btn:hover { background: var(--na-ink); color: #fff !important; }
.na-btn-primary { background: var(--na-ink); color: #fff !important; }
.na-btn-primary:hover { background: #3a3f4b; }
.na-btn-ext::after { content: "↗"; }
.na-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; background: var(--na-card); border: 1px solid var(--na-line); border-radius: 16px; padding: 1.25rem; }
.na-split .na-video { border-radius: 12px; overflow: hidden; background: #000; }
.na-split p { font-size: 1.02rem; line-height: 1.85; margin: 0; }
.na-split a { color: var(--na-accent); word-break: break-word; }
.na-related { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--na-line); }
.na-related-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.na-related-head .na-h2 { margin: 0; }
.na-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1.25rem; }
.na-card { display: flex; flex-direction: column; background: var(--na-card); border: 1px solid var(--na-line); border-radius: 14px; overflow: hidden;
           text-decoration: none !important; color: var(--na-ink) !important; transition: box-shadow .2s, transform .2s; }
.na-card:hover { box-shadow: 0 10px 24px rgba(20,24,40,.10); transform: translateY(-2px); }
.na-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.na-card span { display: block; padding: 1rem 1.1rem .2rem; color: var(--na-accent); font-size: .85rem; font-weight: 600; }
.na-card strong { display: block; padding: 0 1.1rem 1.2rem; font-size: 1.05rem; font-weight: 600; line-height: 1.45; }
.na-lightbox { border: 0; padding: 0; background: transparent; max-width: min(1200px, 94vw); max-height: 92vh; overflow: visible; }
.na-lightbox::backdrop { background: rgba(8,10,16,.88); }
.na-lightbox img { display: block; max-width: min(1200px, 94vw); max-height: 86vh; border-radius: 8px; margin: 0 auto; }
.na-lb-btn { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.15);
             color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.na-lb-btn:hover { background: rgba(255,255,255,.3); }
.na-lb-prev { left: 16px; } .na-lb-next { right: 16px; }
.na-lb-close { top: 16px; right: 16px; transform: none; }
@media (max-width: 991px) {
  .na-hero { padding-top: 7.5rem; }
  .na-body { padding: 1.25rem; }
  .na-feature, .na-split { grid-template-columns: 1fr; gap: 1rem; }
  .na-feature:nth-of-type(even) .na-shot { order: 0; }
}