:root{
      --page:#f5f7fb;
      --ink:#111827;
      --muted:#6b7280;
  --section-pad: 34px;
  --section-pad-lg: 42px;
      /* Pull brand red from navbar include if present */
      --accent: var(--scs-red, #9f0014);

      --max: 1100px;
      --radius: 18px;

      --ether-tint: rgba(255,255,255,0.45);
    }

    *{ box-sizing:border-box; }
    html,body{
      margin:0; padding:0; min-height:100%;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--ink);
      background: var(--page);
      overflow-x:hidden;
    }
    img,video{ max-width:100%; height:auto; display:block; }
    a{ color:inherit; text-decoration:none; }
    a:hover{ text-decoration:underline; }
    .container{ max-width: var(--max); }

    /* ===============================
       Liquid Ether — stable layering
       =============================== */
    #root{
      position:fixed !important;
      inset:0 !important;
      width:100vw !important;
      height:100vh !important;
      z-index:0 !important;
      pointer-events:none !important;
      margin:0 !important;
      padding:0 !important;
      max-width:none !important;
      background:transparent !important;
    }
    #root canvas,#root svg{
      position:absolute !important;
      inset:0 !important;
      width:100% !important;
      height:100% !important;
      display:block !important;
    }
    #root .controls,#root .ui,#root nav,#root button,#root input,#root select,#root textarea,#root a{
      display:none !important;
    }
    #etherTint{
      position:fixed;
      inset:0;
      background: var(--ether-tint);
      z-index:1;
      pointer-events:none;
    }

    /* Keep main content above ether */
    body > nav,
    body > header,
    body > main,
    body > section,
    body > footer,
    body > div{
      position:relative;
      z-index:2;
    }

    /* Preloader */
    #preloader{
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(245,247,251,.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: opacity .45s ease, visibility .45s ease;
    }
    #preloader.is-done{ opacity:0; visibility:hidden; }

    /* Glass helper */
    .glass{
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(148,163,184,.35);
      backdrop-filter: blur(8px) saturate(120%);
      -webkit-backdrop-filter: blur(8px) saturate(120%);
      border-radius: 22px;
      box-shadow: 0 16px 40px rgba(15,23,42,.18);
    }
    .glass-border-glow{ position:relative; }
    .glass-border-glow::after{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      pointer-events:none;
      background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(236,72,153,.14));
      filter: blur(3px);
      opacity:.35;
      z-index:-1;
    }

    /* HERO */
header.hero{
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;

  background-image: url('../img/photos/bg2.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 20%;

  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(
        180deg,
        rgba(15,23,42,.0),
        rgba(15,23,42,.0) 35%,
        rgba(15,23,42,.0)
      );
    }
    .hero-overlay{
      position:relative;
      width:100%;
      padding: 4rem 1rem;
    }
    .hero-card{
      max-width: 980px;
      margin: 0 auto;
    }
    .hero-eyebrow{
      font-size:.85rem;
      letter-spacing:.25em;
      text-transform:uppercase;
      font-weight:900;
      color:#0b1220;
      margin-bottom:.6rem;
    }
    .hero h1{
      font-family:Merriweather,serif;
      font-weight:800;
      font-size:clamp(2.3rem,5.2vw,3.5rem);
      line-height:1.05;
      margin:0 0 .6rem;
      color:#0b1220;
      text-shadow:0 10px 26px rgba(0,0,0,.15);
    }
    .hero-sub{
      font-size:clamp(.92rem,1.5vw,1.05rem);
      font-weight:900;
      letter-spacing:.22em;
      text-transform:uppercase;
      color:#0b1220;
      margin:0 0 .9rem;
    }
    .hero p{
      margin:0 0 1.05rem;
      color:#0b1220;
      opacity:.92;
      max-width: 78ch;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:.25rem;
    }
    .btnx{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:12px 18px;
      border-radius:999px;
      font-weight:900;
      border:1px solid rgba(15,23,42,.16);
      background:#fff;
      color: var(--accent);
      box-shadow: 0 12px 30px rgba(15,23,42,.18);
      transition: transform .15s ease, box-shadow .15s ease;
      text-decoration:none;
    }
    .btnx:hover{
      text-decoration:none;
      transform: translateY(-1px);
      box-shadow: 0 16px 40px rgba(15,23,42,.22);
    }
    .btnx.secondary{
      background:transparent;
      color:#0b1220;
      border:1.5px solid rgba(15,23,42,.22);
      box-shadow:none;
    }

    /* Sections */
section{ padding: var(--section-pad) 0; }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:16px;
      margin-bottom:18px;
    }
    .section-head h2{
      margin:0;
      font-family:Merriweather,serif;
      font-weight:800;
      letter-spacing:-.01em;
      color: var(--accent);
      font-size: 1.6rem;
    }
    .section-note{
      color: var(--muted);
      font-size:.95rem;
    }
#insights{ padding-top: 22px; }

    /* Cards */
    .cardx{
      background:#fff;
      border:1px solid rgba(15,23,42,.10);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: 0 8px 18px rgba(15,23,42,.05);
    }
    .cardx .pad{ padding:16px; }
    .tag{
      display:inline-block;
      font-size:.75rem;
      padding:6px 10px;
      border-radius:999px;
      font-weight:900;
      border:1px solid rgba(159,0,20,.22);
      background: rgba(159,0,20,.06);
      color: var(--accent);
      margin-bottom:10px;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .muted{ color: var(--muted); }

    /* Stats */
    .stats h3{
      font-size:2.2rem;
      font-weight:900;
      margin:0;
      color: #0b1220;
    }
    .stats p{ margin:.25rem 0 0; color: var(--muted); }

    /* ===============================
       WSJ-ish Trends block
       =============================== */
    .wsj-block{
      background: rgba(255,255,255,.78);
      border: 1px solid rgba(15,23,42,.10);
      border-radius: 22px;
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
      box-shadow: 0 18px 50px rgba(15,23,42,.10);
      overflow:hidden;
    }
    .wsj-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:16px;
      padding:18px 18px 10px;
      border-bottom:1px solid rgba(15,23,42,.08);
    }
    .wsj-kicker{
      font-size:.78rem;
      letter-spacing:.22em;
      text-transform:uppercase;
      font-weight:900;
      opacity:.70;
    }
    .wsj-title{
      margin:0;
      font-family:Merriweather,serif;
      font-weight:800;
      letter-spacing:-.01em;
      font-size: 1.7rem;
      color: var(--accent);
    }
    .wsj-sub{
      margin-top:6px;
      font-size:.88rem;
      font-weight:900;
      letter-spacing:.18em;
      text-transform:uppercase;
      opacity:.75;
    }
    .wsj-pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid rgba(15,23,42,.14);
      background:#fff;
      color: var(--accent);
      white-space:nowrap;
    }

    .wsj-grid{
      display:grid;
      grid-template-columns: 1.05fr 1.6fr 1.05fr;
      gap:0;
    }
    @media (max-width: 992px){
      .wsj-grid{ grid-template-columns: 1fr; }
      .wsj-col{ border-left:0 !important; }
    }
    .wsj-col{
      padding: 16px 18px;
      min-height: 100%;
    }
    .wsj-col + .wsj-col{
      border-left:1px solid rgba(15,23,42,.08);
    }

    /* left list */
    .wsj-item{
      padding:12px 0;
      border-top:1px solid rgba(15,23,42,.10);
    }
    .wsj-item:first-child{ border-top:0; padding-top:0; }
    .wsj-tag{
      font-size:.72rem;
      letter-spacing:.14em;
      text-transform:uppercase;
      font-weight:900;
      color: var(--accent);
      opacity:.9;
      margin-bottom:6px;
      display:inline-block;
    }
    .wsj-hl{
      font-family:Merriweather,serif;
      font-weight:800;
      line-height:1.15;
      font-size:1.25rem;
      margin:0 0 6px;
    }
    .wsj-dek{
      margin:0;
      opacity:.78;
      line-height:1.45;
      color:#0b1220;
    }
    .wsj-meta{
      margin-top:8px;
      font-size:.82rem;
      opacity:.7;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    /* center lead */
    .wsj-lead{
      background: rgba(255,255,255,.85);
      border: 1px solid rgba(15,23,42,.10);
      border-radius: 18px;
      padding: 16px;
      box-shadow: 0 14px 40px rgba(15,23,42,.08);
    }
    .wsj-lead .wsj-hl{ font-size:1.6rem; }
    .wsj-lead .wsj-dek{ font-size:1.02rem; }

    /* Lead image frame (only used in middle card) */
    .wsj-lead-thumb{
      position:relative;
      width:100%;
      aspect-ratio:16/9;
      border-radius:14px;
      overflow:hidden;
      border:1px solid rgba(15,23,42,.10);
      background: rgba(15,23,42,.03);
      margin-bottom:12px;
    }
    .wsj-lead-thumb img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;        /* keeps any dimensions looking good */
      object-position:center;
      display:block;
    }
    .wsj-lead-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.18));
      opacity:.55;
      pointer-events:none;
    }

    .wsj-lead-cta{
      margin-top:12px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }
    .wsj-cta{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 900;
      border: 1px solid rgba(15,23,42,.14);
      background:#fff;
      color: var(--accent);
      transition: transform .15s ease;
      white-space:nowrap;
    }
    .wsj-cta.secondary{
      background:transparent;
      color:#0b1220;
    }
    .wsj-cta:hover{ text-decoration:none; transform: translateY(-1px); }

    /* right rail */
    .wsj-rail-title{
      font-family:Merriweather,serif;
      font-weight:800;
      font-size:1.15rem;
      margin:0 0 10px;
      color:#0b1220;
      opacity:.9;
    }
    .wsj-rail-item{
      display:grid;
      grid-template-columns: 40px 1fr;
      gap:12px;
      padding: 10px 0;
      border-top:1px solid rgba(15,23,42,.10);
      align-items:start;
    }
    .wsj-rail-item:first-of-type{ border-top:0; padding-top:0; }
    .wsj-rail-bullet{
      width:40px; height:40px;
      border-radius:12px;
      border:1px solid rgba(15,23,42,.12);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:900;
      color: var(--accent);
      background: rgba(159,0,20,.06);
    }
    .wsj-rail-hl{
      font-family:Merriweather,serif;
      font-weight:800;
      line-height:1.15;
      margin:0 0 4px;
    }
    .wsj-rail-meta{
      font-size:.82rem;
      opacity:.7;
    }

    /* Events list */
    .event{
      display:grid;
      grid-template-columns: 90px 1fr;
      gap:16px;
      padding:14px 0;
      border-top:1px solid rgba(15,23,42,.10);
    }
    .event:first-child{ border-top:0; padding-top:0; }
    .datebox{
      border:1px solid rgba(15,23,42,.10);
      border-radius:12px;
      overflow:hidden;
      text-align:center;
      background:#fff;
      width:90px;
    }
    .datebox .m{
      background:#0b1220;
      color:#fff;
      font-weight:800;
      font-size:.85rem;
      padding:6px 0;
    }
    .datebox .d{
      font-size:22px;
      font-weight:900;
      padding:8px 0 10px;
    }

    /* Footer neutrality */
    footer, .bsa-footer { background:#0b1120; color:#e5e7eb; }
    .bsa-footer-card{
      background:rgba(15,23,42,0.92) !important;
      backdrop-filter: blur(10px) saturate(120%);
      -webkit-backdrop-filter: blur(10px) saturate(120%);
    }

    /* HARD RESET for any global flex wrappers */
    html, body { display:block !important; }
    body{ flex:none !important; flex-direction:column !important; flex-wrap:nowrap !important; align-items:stretch !important; }
    body > nav, body > header, body > main, body > section, body > footer, body > div{
      width:100% !important;
      max-width:none !important;
      flex:0 0 auto !important;
    }
    .page, .wrapper, .main, .layout, #app, #page{ display:block !important; }