/* ============================================================
   NAF&SA Updates — hub + 14 update pages
   ============================================================ */
.up-hero{position:relative;overflow:hidden;isolation:isolate;background:#1D161C;
  padding:clamp(52px,6.5vw,88px) 0 clamp(34px,4.5vw,54px)}
.up-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(104deg,rgba(29,22,28,.95) 0%,rgba(29,22,28,.9) 50%,rgba(74,35,30,.92) 100%)}
.up-hero-bg{position:absolute;inset:0;z-index:-2}
.up-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 34%;display:block}
.up-hero:not(.has-img)::after{background:linear-gradient(104deg,#1D161C 0%,#2A1E22 55%,#4A231E 100%)}
.up-hero .ab-crumb{justify-content:flex-start;color:rgba(252,247,234,.72);margin-bottom:16px}
.up-hero .ab-crumb a{color:var(--hb-gold-dot)}
.up-cat{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;padding:7px 16px 7px 10px;
  border-radius:999px;background:rgba(252,247,234,.09);border:1px solid rgba(226,177,93,.42);
  font:700 10.4px/1 var(--hb-text);letter-spacing:.14em;text-transform:uppercase;color:#F3D58C}
.up-cat img{width:17px;height:17px}
.up-h1{margin:0 0 12px;max-width:26ch;
  font:800 clamp(25px,3.7vw,42px)/1.14 var(--hb-display);color:#FCF7EA;letter-spacing:-.014em}
.up-date{margin:0 0 16px;font:600 12.4px/1 var(--hb-text);letter-spacing:.06em;color:var(--hb-gold-dot)}
.up-exc{margin:0;max-width:72ch;font:400 15.4px/1.85 var(--hb-text);color:rgba(252,247,234,.85)}

.up-body .ab-wrap{max-width:900px}
.up-shot{margin:0 0 28px;border-radius:20px;overflow:hidden;border:1.5px solid #D9A64C;
  box-shadow:0 28px 54px -32px rgba(29,22,28,.45)}
.up-shot img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.up-prose p{margin:0 0 15px;font:400 15.5px/1.86 var(--hb-text);color:var(--hb-body)}
.up-prose strong{color:var(--hb-ink);font-weight:700}
.up-prose a{color:var(--hb-burg);font-weight:600;text-decoration:none;
  border-bottom:1.5px solid rgba(123,45,38,.34)}
.up-prose a:hover{border-color:var(--hb-burg)}
.up-h2{margin:30px 0 12px;padding-left:16px;position:relative;
  font:700 19px/1.32 var(--hb-display);color:var(--hb-ink)}
.up-h2::before{content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;transform:rotate(45deg);
  background:radial-gradient(circle at 35% 30%,#F3D58C,var(--hb-gold) 55%,#B08542)}
.up-note{margin:22px 0;padding:20px 24px;border-radius:16px;
  background:#FBF3E0;border:1px solid rgba(226,177,93,.55);border-left:4px solid var(--hb-burg)}
.up-note .k{display:block;margin-bottom:7px;font:700 9.8px/1 var(--hb-text);letter-spacing:.18em;
  text-transform:uppercase;color:var(--hb-bronze)}
.up-note p{margin:0;font:600 14.4px/1.72 var(--hb-text);color:var(--hb-ink)}
.up-ctas{justify-content:flex-start;margin:26px 0 4px}
.up-back{margin:30px 0 0;padding-top:20px;border-top:1px solid var(--hb-border)}
.up-back a{font:700 13.5px/1 var(--hb-text);color:var(--hb-burg);text-decoration:none;
  border-bottom:2px solid rgba(123,45,38,.4)}

/* ---------- hub ---------- */
.up-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  max-width:1180px;margin:0 auto;align-items:stretch}
.up-card{display:flex;flex-direction:column;height:100%;border-radius:20px;overflow:hidden;
  border:1px solid var(--hb-border);background:linear-gradient(180deg,#FFFDF6,#F6EEDB);
  box-shadow:0 22px 44px -28px rgba(29,22,28,.3),inset 0 1px 0 #fff;
  transition:transform .18s ease,border-color .18s ease}
.up-card:hover{transform:translateY(-4px);border-color:#B08542}
.up-card-shot{display:block;aspect-ratio:16/9;overflow:hidden;background:#F0E6CE;
  border-bottom:1px solid var(--hb-border)}
.up-card-shot img{width:100%;height:100%;object-fit:cover;display:block}
.up-card-med{display:grid;place-items:center;aspect-ratio:16/9;
  background:linear-gradient(140deg,#2A1E22,#4A231E);border-bottom:1px solid var(--hb-border)}
.up-card-med span{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;
  background:radial-gradient(circle at 35% 30%,#F3D58C,var(--hb-gold) 55%,#B08542);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.25)}
.up-card-med img{width:30px;height:30px}
.up-card-b{display:flex;flex-direction:column;flex:1;padding:20px 20px 18px}
.up-card-cat{align-self:flex-start;margin-bottom:10px;padding:5px 12px;border-radius:999px;
  font:700 9.4px/1 var(--hb-text);letter-spacing:.13em;text-transform:uppercase;color:#3F2F10;
  background:linear-gradient(180deg,#F0CE83,var(--hb-gold) 58%,#C89440)}
.up-card h3{margin:0 0 6px;font:800 16.5px/1.3 var(--hb-display);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;min-height:3.9em}
.up-card h3 a{color:var(--hb-ink);text-decoration:none}
.up-card h3 a:hover{color:var(--hb-burg)}
.up-card-date{margin:0 0 10px!important;font:600 11.6px/1 var(--hb-text)!important;
  color:var(--hb-muted)!important;letter-spacing:.05em}
.up-card p{margin:0 0 14px;font:400 13.4px/1.68 var(--hb-text);color:var(--hb-body);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.up-card .pg-cta{margin-top:auto}

/* live API band */
.up-live{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  max-width:1180px;margin:0 auto;align-items:stretch}
.up-live .up-card p{-webkit-line-clamp:3}

@media (max-width:1024px){.up-cards,.up-live{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:660px){.up-cards,.up-live{grid-template-columns:minmax(0,1fr)}
  .up-card h3{min-height:0}}

/* ── FIX · callout cards keep their own ink inside dark sections ──
   .ab-sec.ab--dark .cs-body p (0,3,1) was overriding .up-note p (0,1,1),
   painting near-white text onto the note's cream card. Scope-lock it. */
.ab-sec.ab--dark .up-note,
.ab-sec.ab--dark .cs-body .up-note{background:#FBF3E0;border-color:rgba(226,177,93,.55)}
.ab-sec.ab--dark .up-note p,
.ab-sec.ab--dark .cs-body .up-note p{color:var(--hb-ink)}
.ab-sec.ab--dark .up-note .k,
.ab-sec.ab--dark .cs-body .up-note .k{color:var(--hb-bronze)}
.ab-sec.ab--dark .up-note strong,
.ab-sec.ab--dark .cs-body .up-note strong{color:var(--hb-burg)}
.ab-sec.ab--dark .up-note a,
.ab-sec.ab--dark .cs-body .up-note a{color:var(--hb-burg)}

/* ── FIX · Updates cards now behave exactly like Maritime Insights cards ──
   Previously <article> with three separate links (medallion, title, CTA):
   only those hotspots opened the page, the rest of the card was dead.
   Now the whole card is one <a>, matching .ins-card. */
a.up-card{text-decoration:none;color:inherit}
a.up-card:focus-visible{outline:3px solid var(--hb-gold,#E2B15D);outline-offset:3px}
.up-card h3{color:var(--hb-ink);transition:color .2s}
a.up-card:hover h3{color:var(--hb-burg)}
.up-card .pg-cta{margin-top:auto;pointer-events:none}

/* ── Article byline — author + publication month ──
   Google expects the date in the structured data to be visible on the page.
   A date present only in JSON-LD is a mismatch it may disregard. */
.up-byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin:14px 0 0;font:600 12.4px/1.5 var(--hb-text);color:var(--hb-bronze)}
.up-byline .up-by{display:inline-flex;align-items:center;gap:7px}
.up-byline .up-by::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--hb-gold);flex:none}
.up-byline time{position:relative;padding-left:11px;color:var(--hb-muted);font-weight:500}
.up-byline time::before{content:"·";position:absolute;left:0;color:var(--hb-bronze)}
.ab-hero .up-byline{justify-content:center}