/* ==========================================================================
   FinNews — Finin2min
   Built on the site's existing brand tokens (#1B4FD8 / #0D2137 / #0891B2,
   Inter) so FinNews reads as part of the site rather than a bolted-on section.
   Everything is namespaced .fn-* to avoid colliding with shell.css.
   ========================================================================== */

:root{
  --fn-ink:#0D2137;
  --fn-ink-2:#173352;
  --fn-accent:#1B4FD8;
  --fn-accent-soft:#EEF2FF;
  --fn-cyan:#0891B2;
  /* Neutrals carry a slight blue bias toward the accent rather than sitting
     on pure grey, so the page reads as composed. */
  --fn-paper:#F6F8FC;
  --fn-surface:#FFFFFF;
  --fn-line:#E4E9F2;
  --fn-line-strong:#CFD8E8;
  --fn-text:#33415C;
  --fn-muted:#6B7A90;
  --fn-high-bg:#FEF3F2; --fn-high-fg:#B42318;
  --fn-watch-bg:#FFFAEB; --fn-watch-fg:#B54708;
  --fn-good-bg:#ECFDF3; --fn-good-fg:#067647;
  --fn-radius:14px;
  --fn-shell:1220px;
  --fn-shadow:0 1px 2px rgba(13,33,55,.04),0 12px 28px -12px rgba(13,33,55,.16);
}

.fn-page{background:var(--fn-paper);color:var(--fn-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
.fn-shell{width:min(var(--fn-shell),calc(100% - 40px));margin-inline:auto}
.fn-page *{box-sizing:border-box}
.fn-page img{max-width:100%;height:auto;display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.fn-page a{color:inherit}
.fn-page :focus-visible{outline:3px solid var(--fn-accent);outline-offset:2px;border-radius:4px}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.fn-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#08192B 0%,var(--fn-ink) 46%,#0E3550 100%);color:#fff;padding:44px 0 52px}
.fn-hero::after{content:"";position:absolute;right:-160px;top:-220px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(8,145,178,.26),transparent 66%);pointer-events:none}
.fn-hero-inner{position:relative;z-index:2}
.fn-eyebrow{display:inline-flex;align-items:center;gap:9px;text-transform:uppercase;font-size:11px;font-weight:800;letter-spacing:.12em;color:#7DD3FC;margin:0 0 12px}
.fn-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#38BDF8;box-shadow:0 0 0 4px rgba(56,189,248,.18)}
.fn-hero h1{margin:0 0 12px;font-size:clamp(28px,4.6vw,56px);line-height:1.06;letter-spacing:-.035em;font-weight:800;text-wrap:balance;max-width:19ch}
.fn-hero h1 em{font-style:normal;color:#7DD3FC}
.fn-hero-sub{margin:0;max-width:66ch;color:#C3D2E4;font-size:clamp(14px,1.4vw,16.5px)}
.fn-hero-search{margin-top:18px;max-width:720px}

/* ── Search ──────────────────────────────────────────────────────────────── */
.fn-search{display:flex;align-items:center;gap:8px;background:var(--fn-surface);border:1px solid var(--fn-line);border-radius:12px;padding:5px 6px 5px 14px;box-shadow:var(--fn-shadow)}
/* No rotation: that was compensating for the old ⚲ glyph, which needed a
   -45deg twist to read as a magnifying glass at all. The SVG icon that
   replaced it is already drawn at the correct angle. */
.fn-search-icon{color:var(--fn-muted);display:inline-flex;align-items:center}
.fn-search input[type=search]{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:10px 2px;font:inherit;font-size:14px;color:var(--fn-ink)}
.fn-search select{border:0;outline:0;background:var(--fn-accent-soft);color:var(--fn-accent);font:inherit;font-size:12px;font-weight:700;border-radius:8px;padding:8px 8px;cursor:pointer;max-width:130px}
.fn-search button{border:0;background:var(--fn-ink);color:#fff;font:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:9px;cursor:pointer;transition:background .15s}
.fn-search button:hover{background:var(--fn-accent)}

/* ── Section rail ────────────────────────────────────────────────────────── */
.fn-sectionnav{background:var(--fn-surface);border-bottom:1px solid var(--fn-line);position:sticky;top:60px;z-index:8}
.fn-sectionnav .fn-shell{display:flex;gap:4px;overflow-x:auto;padding:9px 0;scrollbar-width:thin}
.fn-sectionnav a{white-space:nowrap;text-decoration:none;font-size:12.5px;font-weight:700;color:var(--fn-muted);padding:7px 12px;border-radius:999px;transition:.15s}
.fn-sectionnav a:hover{background:var(--fn-accent-soft);color:var(--fn-accent)}
.fn-sectionnav a[aria-current=page]{background:var(--fn-ink);color:#fff}

/* ── Main ────────────────────────────────────────────────────────────────── */
.fn-main{padding:0 0 72px}
.fn-lift{margin-top:-56px;position:relative;z-index:3}
.fn-cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.85fr);gap:30px;align-items:start}

/* ── Blocks ──────────────────────────────────────────────────────────────── */
.fn-block{margin:0 0 34px;border-radius:var(--fn-radius)}
.fn-block-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:0 0 16px}
.fn-block-head h2{margin:0;font-size:22px;letter-spacing:-.024em;color:var(--fn-ink);font-weight:800;text-wrap:balance}
.fn-block-head p{margin:4px 0 0;font-size:13px;color:var(--fn-muted);max-width:62ch}
.fn-block-cta{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--fn-accent);text-decoration:none}
.fn-block-cta:hover{text-decoration:underline}

.fn-theme-tint{background:var(--fn-accent-soft);border:1px solid #DDE5FA;padding:22px}
.fn-theme-dark{background:linear-gradient(150deg,#0A2033,#0E3A52);color:#fff;padding:26px}
.fn-theme-dark .fn-block-head h2{color:#fff}
.fn-theme-dark .fn-block-head p{color:#AEC0D4}
.fn-theme-dark .fn-block-cta{color:#7DD3FC}
.fn-theme-dark .fn-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.fn-theme-dark .fn-card h3 a,.fn-theme-dark .fn-card h2 a{color:#fff}
.fn-theme-dark .fn-dek{color:#B6C6D8}
.fn-theme-dark .fn-meta{color:#93A7BC}
.fn-theme-dark .fn-badge-section{background:rgba(125,211,252,.14);color:#7DD3FC}

/* ── Grids and lists ─────────────────────────────────────────────────────── */
.fn-grid{display:grid;gap:16px}
.fn-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fn-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fn-list{display:flex;flex-direction:column;gap:12px}
.fn-leadgrid{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,.72fr);gap:18px}
.fn-quicklist{display:flex;flex-direction:column;gap:10px}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.fn-card{background:var(--fn-surface);border:1px solid var(--fn-line);border-radius:var(--fn-radius);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.fn-card:hover{transform:translateY(-2px);box-shadow:var(--fn-shadow);border-color:var(--fn-line-strong)}
.fn-card h2,.fn-card h3{margin:0;letter-spacing:-.018em;color:var(--fn-ink);text-wrap:balance}
.fn-card h2 a,.fn-card h3 a{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .2s}
.fn-card h2 a:hover,.fn-card h3 a:hover{background-size:100% 1px}
.fn-dek{margin:7px 0 0;font-size:13px;color:var(--fn-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fn-action{margin:9px 0 0;font-size:12px;color:var(--fn-text);background:var(--fn-good-bg);border-left:3px solid var(--fn-good-fg);padding:7px 10px;border-radius:0 7px 7px 0}
.fn-action strong{color:var(--fn-good-fg)}

.fn-card-hero{display:flex;flex-direction:column;min-height:340px;border:0;background:var(--fn-ink)}
.fn-card-hero.has-image{position:relative}
.fn-hero-media{position:absolute;inset:0}
.fn-hero-media img{width:100%;height:100%;object-fit:cover}
.fn-card-hero.has-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,20,35,.94) 8%,rgba(6,20,35,.66) 46%,rgba(6,20,35,.24) 100%)}
.fn-hero-body{position:relative;z-index:2;margin-top:auto;padding:26px;color:#fff}
.fn-card-hero:not(.has-image){background:linear-gradient(140deg,#0E2841,#1A5C7A)}
.fn-card-hero h2{font-size:clamp(21px,2.5vw,31px);line-height:1.12;color:#fff}
.fn-card-hero .fn-dek{color:#CBD9E8;font-size:14px;-webkit-line-clamp:2}
.fn-card-hero .fn-meta{color:#A8BCCF}
.fn-card-hero .fn-badge-section{background:rgba(255,255,255,.15);color:#DCEBFA}
.fn-card-hero .fn-action{background:rgba(255,255,255,.1);border-left-color:#7DD3FC;color:#E4EEF8}
.fn-card-hero .fn-action strong{color:#7DD3FC}
.fn-card-hero:hover{transform:none}

.fn-card-thumb{display:flex;flex-direction:column}
.fn-card-thumb .fn-thumb{display:block;aspect-ratio:16/9;background:linear-gradient(135deg,#E6EDF8,#D5E5F1);overflow:hidden}
.fn-card-thumb .fn-thumb img{width:100%;height:100%;object-fit:cover}
.fn-card-body{padding:14px 15px 15px;display:flex;flex-direction:column;flex:1}
.fn-card-thumb h3{font-size:15px;line-height:1.34;margin-top:8px}
.fn-card-thumb .fn-meta{margin-top:auto;padding-top:12px}

.fn-list-thumb .fn-card-thumb{flex-direction:row;align-items:stretch}
.fn-list-thumb .fn-card-thumb .fn-thumb{flex:0 0 168px;aspect-ratio:4/3}
.fn-list-thumb .fn-card-body{padding:13px 15px}

.fn-card-compact{display:flex;gap:13px;align-items:center;padding:12px 14px}
.fn-compact-body{min-width:0}
.fn-card-compact h3{font-size:13.5px;line-height:1.35}
.fn-datebox{flex:0 0 52px;text-align:center;border-radius:9px;padding:7px 4px;background:var(--fn-accent-soft);color:var(--fn-accent);font-variant-numeric:tabular-nums}
.fn-datebox strong{display:block;font-size:17px;line-height:1;font-weight:800}
.fn-datebox span{font-size:9.5px;font-weight:800;letter-spacing:.06em}
.fn-urg-today,.fn-urg-urgent{background:var(--fn-high-bg);color:var(--fn-high-fg)}
.fn-urg-soon{background:var(--fn-watch-bg);color:var(--fn-watch-fg)}

.fn-card-text{padding:13px 15px}
.fn-card-text h3{font-size:14px;line-height:1.36}
.fn-list-digest .fn-card-text{border-left:3px solid var(--fn-accent-soft)}

/* ── Badges and meta ─────────────────────────────────────────────────────── */
.fn-badges{display:flex;flex-wrap:wrap;gap:5px}
.fn-badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;background:#EEF2F7;color:#4A5A72;white-space:nowrap}
.fn-badge-section{background:var(--fn-accent-soft);color:var(--fn-accent)}
.fn-badge-high{background:var(--fn-high-bg);color:var(--fn-high-fg)}
.fn-badge-watch{background:var(--fn-watch-bg);color:var(--fn-watch-fg)}
.fn-badge-breaking{background:var(--fn-high-fg);color:#fff}
.fn-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;font-size:11px;color:var(--fn-muted);font-variant-numeric:tabular-nums}
.fn-meta-reg{font-weight:800;color:var(--fn-text)}
.fn-meta-src{color:var(--fn-good-fg);font-weight:700}
.fn-meta>*+*::before{content:"·";margin-right:8px;color:var(--fn-line-strong)}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.fn-empty{background:var(--fn-surface);border:1px dashed var(--fn-line-strong);border-radius:var(--fn-radius);padding:34px 24px;text-align:center;color:var(--fn-muted)}
.fn-empty strong{display:block;color:var(--fn-ink);font-size:15px;margin-bottom:5px}
.fn-empty p{margin:0;font-size:13px;max-width:60ch;margin-inline:auto}

/* ── Story page ──────────────────────────────────────────────────────────── */
.fn-story{background:var(--fn-surface);border:1px solid var(--fn-line);border-radius:var(--fn-radius);padding:clamp(22px,3.4vw,44px);max-width:820px;margin-inline:auto}
.fn-crumb{font-size:12px;color:var(--fn-muted);margin-bottom:16px}
.fn-crumb a{color:var(--fn-accent);text-decoration:none;font-weight:600}
.fn-crumb a:hover{text-decoration:underline}
.fn-story h1{margin:12px 0 12px;font-size:clamp(26px,3.7vw,40px);line-height:1.13;letter-spacing:-.032em;color:var(--fn-ink);font-weight:800;text-wrap:balance}
.fn-story-dek{font-size:clamp(15px,1.7vw,18px);color:var(--fn-muted);margin:0 0 18px;text-wrap:pretty}
.fn-byline{display:flex;flex-wrap:wrap;gap:9px;align-items:center;font-size:12px;color:var(--fn-muted);padding:13px 0;border-block:1px solid var(--fn-line);font-variant-numeric:tabular-nums}
.fn-byline strong{color:var(--fn-ink)}
.fn-storyimg{margin:22px 0;border-radius:12px;overflow:hidden}
.fn-storyimg figcaption{font-size:11.5px;color:var(--fn-muted);padding:8px 2px 0}
.fn-impactgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:26px 0}
.fn-impactbox{background:var(--fn-paper);border:1px solid var(--fn-line);border-radius:12px;padding:15px 16px}
.fn-impactbox h2{margin:0 0 6px;font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:900;color:var(--fn-accent)}
.fn-impactbox p{margin:0;font-size:13.5px;color:var(--fn-text)}
.fn-impactbox.is-action{background:var(--fn-good-bg);border-color:#BBF0D2}
.fn-impactbox.is-action h2{color:var(--fn-good-fg)}
.fn-body{font-size:16px;line-height:1.72;color:var(--fn-text)}
.fn-body h2{font-size:20px;margin:30px 0 10px;color:var(--fn-ink);letter-spacing:-.02em}
.fn-body p{margin:0 0 16px}
.fn-body ul{margin:0 0 16px;padding-left:22px}
.fn-body li{margin-bottom:7px}
.fn-sourcebox{border-left:4px solid var(--fn-good-fg);background:var(--fn-good-bg);padding:15px 17px;border-radius:0 11px 11px 0;font-size:13px;margin:26px 0}
.fn-sourcebox strong{color:var(--fn-good-fg);display:block;margin-bottom:4px}
.fn-sourcebox a{color:var(--fn-accent);word-break:break-word}
.fn-keyfacts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.fn-keyfact{background:var(--fn-paper);border:1px solid var(--fn-line);border-radius:9px;padding:8px 12px;font-size:12px}
.fn-keyfact span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--fn-muted);margin-bottom:2px}
.fn-keyfact strong{color:var(--fn-ink);font-variant-numeric:tabular-nums}
.fn-related{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--fn-line)}
.fn-related h2{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--fn-muted);margin:0 0 12px}
.fn-relgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:10px}
.fn-rellink{display:block;background:var(--fn-paper);border:1px solid var(--fn-line);border-radius:10px;padding:12px 14px;text-decoration:none;transition:.15s}
.fn-rellink:hover{border-color:var(--fn-accent);background:var(--fn-accent-soft)}
.fn-rellink span{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--fn-accent);margin-bottom:3px}
.fn-rellink strong{font-size:13px;color:var(--fn-ink);font-weight:600}
.fn-disclaimer{margin-top:26px;font-size:11.5px;color:var(--fn-muted);border-top:1px solid var(--fn-line);padding-top:14px}

/* ── Search results page ─────────────────────────────────────────────────── */
.fn-results-head{padding:26px 0 18px}
.fn-results-head h1{margin:0 0 6px;font-size:clamp(22px,3vw,30px);letter-spacing:-.028em;color:var(--fn-ink)}
.fn-results-count{font-size:13px;color:var(--fn-muted);font-variant-numeric:tabular-nums}
.fn-filters{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.fn-filters select{border:1px solid var(--fn-line);background:var(--fn-surface);border-radius:9px;padding:8px 11px;font:inherit;font-size:12.5px;color:var(--fn-text)}
.fn-result{background:var(--fn-surface);border:1px solid var(--fn-line);border-radius:12px;padding:15px 17px;margin-bottom:11px;transition:.15s}
.fn-result:hover{border-color:var(--fn-line-strong);box-shadow:var(--fn-shadow)}
.fn-result h2{margin:0 0 5px;font-size:16px;letter-spacing:-.015em}
.fn-result h2 a{color:var(--fn-ink);text-decoration:none}
.fn-result h2 a:hover{color:var(--fn-accent)}
.fn-result p{margin:0;font-size:13px;color:var(--fn-muted)}
.fn-result mark{background:#FEF08A;color:inherit;padding:0 2px;border-radius:2px}
.fn-result-url{font-size:11px;color:var(--fn-good-fg);margin-bottom:4px;word-break:break-all}
.fn-pager{display:flex;gap:7px;justify-content:center;margin:26px 0;flex-wrap:wrap}
.fn-pager a,.fn-pager span{padding:8px 13px;border-radius:9px;border:1px solid var(--fn-line);background:var(--fn-surface);text-decoration:none;font-size:13px;color:var(--fn-text);font-variant-numeric:tabular-nums}
.fn-pager .is-current{background:var(--fn-ink);color:#fff;border-color:var(--fn-ink);font-weight:700}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  .fn-cols{grid-template-columns:1fr}
  .fn-leadgrid{grid-template-columns:1fr}
  .fn-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fn-sectionnav{top:0}
}
@media(max-width:660px){
  .fn-shell{width:min(100% - 26px,var(--fn-shell))}
  .fn-hero{padding:22px 0 20px}
  /* The three hard <br> line breaks in the h1 markup are a deliberate desktop
     device - "What changed. / Why it matters. / What you need to do." reads as
     three punchy lines when there is width to spend on it. On a phone that
     same forced 3-line stack, at this font size, was consuming roughly
     three-quarters of the viewport before a single story was visible (measured:
     471px of an 844px-tall screen, first story card at 73% down). Hiding the
     breaks lets text-wrap:balance choose the line count the actual width
     supports instead of a count picked for a much wider screen. */
  .fn-hero h1 br{display:none}
  .fn-hero h1{font-size:26px;max-width:none;margin-bottom:8px}
  .fn-eyebrow{margin-bottom:8px}
  .fn-hero-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fn-hero-search{margin-top:10px}
  .fn-grid-3,.fn-grid-2,.fn-impactgrid{grid-template-columns:1fr}
  .fn-search{flex-wrap:wrap;padding:7px 9px}
  .fn-search input[type=search]{flex:1 1 100%;order:1;padding:4px 0}
  .fn-search-icon{display:none}
  .fn-search select{order:2;flex:1}
  .fn-search button{order:3;flex:1}
  .fn-list-thumb .fn-card-thumb{flex-direction:column}
  .fn-list-thumb .fn-card-thumb .fn-thumb{flex:none;width:100%;aspect-ratio:16/9}
  .fn-card-hero{min-height:290px}
  .fn-hero-body{padding:19px}
}
@media(prefers-reduced-motion:reduce){
  .fn-page *,.fn-card{transition:none!important;animation:none!important}
  .fn-card:hover{transform:none}
}