/* ============================================================
   TRIBECA LISBOA — NEWS ARTICLE (responsive, long-form)
   Reuses --gut/--maxw/.r-wrap/.r-band (responsive.css), the
   homepage event card (.r-ecard) and the Event Detail speaker
   card (.ed-gcard / .ed-grail / .ed-eyebrow / .ed-h). Adds an
   editorial reading column tuned for legibility.
   ============================================================ */
.na{ position:relative; background:#000; color:#fff; font-family:var(--font-text); -webkit-font-smoothing:antialiased; }
.na img{ display:block; }

/* reading column — optimal measure, centered on the page */
.na-col{ max-width:46rem; margin-left:auto; margin-right:auto; }            /* ~62–66 chars per line */

/* reveal (shares the .ed-rev hook) */

/* ===================== HERO IMAGE ===================== */
.na-hero{ width:100%; aspect-ratio:3/2; max-height:58vh; overflow:hidden; background:#111; position:relative; }
.na-hero img{ width:100%; height:100%; object-fit:cover; }
.na-hero::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55)); }
@media (min-width:768px){ .na-hero{ aspect-ratio:16/9; max-height:64vh; } }
@media (min-width:1024px){ .na-hero{ aspect-ratio:21/9; max-height:72vh; } }

/* ===================== MASTHEAD ===================== */
.na-mast{ padding-top:32px; }
.na-back{ display:inline-flex; align-items:center; gap:7px; margin-bottom:22px; color:var(--fg-3);
  text-decoration:none; font-family:var(--font-text); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.04em; transition:color .15s, gap .15s; }
.na-back:hover{ color:#fff; gap:11px; }
.na-back:focus-visible{ outline:2px solid var(--pink); outline-offset:2px; }
.na-back svg{ width:15px; height:15px; }
.na-tag{ display:inline-block; border-radius:var(--radius-pill); padding:5px 12px;
  font-family:var(--font-text); font-weight:700; font-size:13px; margin-bottom:18px; }
.na-title{ margin:0; color:#fff; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(34px,5.2vw,68px); line-height:.95; letter-spacing:-.01em; text-wrap:balance; }
.na-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:20px;
  color:var(--fg-3); font-family:var(--font-text); font-size:var(--caption-size); line-height:var(--caption-lh); }
.na-meta .sep{ opacity:.6; }
.na-meta .author{ color:#fff; font-weight:700; }
.na-dek{ margin:24px 0 0; color:#fff; font-family:var(--font-text); font-weight:700;
  font-size:clamp(20px,2.4vw,26px); line-height:1.3; text-wrap:pretty; }
.na-rule{ height:1px; background:var(--line-dark); margin-top:32px; }
@media (min-width:1024px){ .na-mast{ padding-top:48px; } }

/* ===================== ARTICLE BODY ===================== */
.na-body{ padding-top:32px; }
.na-body p{ margin:0 0 22px; color:#EDEDED; font-family:var(--font-text); font-weight:400;
  font-size:18px; line-height:1.65; text-wrap:pretty; }
.na-body p:last-child{ margin-bottom:0; }
.na-h2{ margin:40px 0 16px; color:#fff; font-family:var(--font-display); font-weight:800;
  text-transform:uppercase; font-size:clamp(24px,3vw,32px); line-height:1; letter-spacing:-.005em; }
.na-quote{ margin:36px 0; padding:6px 0 6px 24px; border-left:3px solid var(--nightlive-bg);
  color:#fff; font-family:var(--font-text); font-weight:700; font-size:clamp(22px,2.8vw,30px); line-height:1.28; text-wrap:pretty; }
@media (min-width:1024px){
  .na-body{ padding-top:40px; }
  .na-body p{ font-size:19px; line-height:1.7; margin-bottom:24px; }
  .na-quote{ margin:44px 0; padding-left:32px; }
}

/* ===================== EXTERNAL LINK (subtle) ===================== */
.na-ext{ margin-top:36px; padding-top:24px; border-top:1px solid var(--line-dark); }
.na-extlink{ display:inline-flex; align-items:center; gap:10px; color:var(--fg-3); text-decoration:none;
  font-family:var(--font-text); font-weight:700; font-size:14px; transition:color .15s, gap .15s; }
.na-extlink:hover{ color:#fff; gap:14px; }
.na-extlink svg{ width:15px; height:15px; }

/* ===================== SOCIAL SHARE ===================== */
.na-share{ display:flex; align-items:center; gap:16px; margin-top:28px; flex-wrap:wrap; }
.na-share-label{ font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-3); }
.na-share-btns{ display:flex; align-items:center; gap:10px; }
.na-share-btn{ width:42px; height:42px; flex:none; display:flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-dark); color:#fff; cursor:pointer; text-decoration:none;
  transition:background .15s, border-color .15s, color .15s; }
.na-share-btn:hover{ background:var(--pink); border-color:var(--pink); color:#000; }
.na-share-btn svg{ width:18px; height:18px; }
.na-share-copied{ font-family:var(--font-text); font-weight:700; font-size:13px; color:var(--pink); }

/* ===================== RELATED MODULES ===================== */
/* events use homepage .r-ecard; speakers use the Event Detail .ed-gcard.
   Both rails are constrained to the centered reading column (.na-col)
   and scroll horizontally within it — keeping one centered container. */
.na-rail{ display:flex; gap:16px; overflow-x:auto; padding-top:0; }
.na-rail::-webkit-scrollbar{ display:none; }
.na-related{ margin-top:8px; }