/* ===== App loader (styles MUST live in head, not in <helmet>, because
     the loader paints before dc-runtime injects helmet contents) ===== */
  html,body{margin:0;padding:0;background:#0a0a0c;}
  html[data-theme="light"],html[data-theme="light"] body{background:#fafbfc;}
  .app-loader{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    background:radial-gradient(125% 120% at 50% 42%, #16161b 0%, #0c0c0f 55%, #08080a 100%);
    transition:opacity .7s cubic-bezier(.4,0,.2,1), visibility 0s linear .7s;
  }
  html[data-theme="light"] .app-loader{
    background:radial-gradient(125% 120% at 50% 42%, #f5f6f8 0%, #fafbfc 55%, #ffffff 100%);
  }
  html[data-theme="light"] .loader-wordmark{color:rgba(20,20,28,0.85);}
  html[data-theme="light"] .loader-tag{color:rgba(20,20,28,0.38);}
  html[data-theme="light"] .loader-bar{background:rgba(20,20,28,0.07);}
  .app-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
  @font-face{
    font-family:'Beaver';
    src:url('/shared/fonts/beaver.ttf') format('truetype');
    font-display:swap;
  }
  .loader-stage{display:flex;flex-direction:column;align-items:center;gap:22px;}
  .loader-lambda{
    font-family:'Beaver',serif;font-weight:400;
    font-size:clamp(96px,12vw,168px);line-height:1;
    letter-spacing:0;
    color:rgba(255,255,255,0.92);
    animation:loaderPulse 2.4s ease-in-out infinite;
  }
  .loader-wordmark{
    font-family:'Archivo',system-ui,sans-serif;font-weight:800;
    font-size:14px;letter-spacing:0.42em;text-transform:uppercase;
    color:rgba(255,255,255,0.85);
  }
  .loader-tag{
    font-family:'Archivo',system-ui,sans-serif;font-weight:500;
    font-size:10px;letter-spacing:0.32em;text-transform:uppercase;
    color:rgba(255,255,255,0.32);
    margin-bottom:6px;
  }
  .loader-bar{
    width:200px;height:2px;background:rgba(255,255,255,0.06);
    overflow:hidden;position:relative;border-radius:2px;
  }
  .loader-bar-fill{
    position:absolute;top:0;left:0;bottom:0;width:100%;
    background:linear-gradient(90deg,
      transparent 0%, #ff7a3d 16%, #a855f7 32%, #1a8917 50%, #dc382a 68%, #6b4bdb 84%, transparent 100%);
    background-size:200% 100%;
    animation:loaderSweep 1.6s linear infinite;
  }
  @keyframes loaderPulse{0%,100%{opacity:0.85;}50%{opacity:1;}}
  @keyframes loaderSweep{0%{background-position:200% 0;}100%{background-position:-100% 0;}}
    *{box-sizing:border-box;}
    html,body{margin:0;padding:0;background:#0a0a0c;}
    html[data-theme="light"],html[data-theme="light"] body{background:#fafbfc;}
    body{font-family:'Archivo',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
    /* Thin, theme-aware scrollbars (consistent with the ADAAS network core). */
    *{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.22) transparent;}
    html[data-theme="light"] *{scrollbar-color:rgba(20,20,28,0.26) transparent;}
    ::-webkit-scrollbar{width:10px;height:10px;}
    ::-webkit-scrollbar-track{background:transparent;}
    ::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);border-radius:999px;border:3px solid transparent;background-clip:padding-box;}
    ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent, #dc382a) 62%, rgba(255,255,255,0.34));background-clip:padding-box;}
    html[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(20,20,28,0.26);background-clip:padding-box;}
    html[data-theme="light"] ::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb, var(--accent, #dc382a) 55%, rgba(20,20,28,0.4));background-clip:padding-box;}
    ::-webkit-scrollbar-corner{background:transparent;}
    @keyframes adPulse{0%,100%{opacity:1;}50%{opacity:.3;}}
    @keyframes monoPulse{0%,100%{opacity:1;}50%{opacity:.4;}}

    /* All five direction panels are permanently visible. Hover only tilts the
       monogram and adds a subtle highlight — panels never disappear, so links
       are always reachable and there's no fade glitch. */
    /* Panels hidden by default; only the small "Direction 0N" marker stays
       visible as a hover target. Hovering anywhere over the panel's bounding
       box (or the active-panel pin) reveals the full content + tilts the
       monogram. !important defeats the inline `pointer-events:none` baked
       into each .panel element. */
    .panel{
      pointer-events:auto !important;
      cursor:default;
      padding:18px 14px;            /* generous hover hit area */
      margin:-18px -14px;           /* don't visually shift positions */
    }
    .panel > *{
      opacity:0;
      transform:translateY(6px);
      transition:opacity .35s ease, transform .35s ease;
    }
    .panel a{cursor:pointer;}
    /* Reveal full content on hover OR when this panel is the active one. */
    .panel:hover > *,
    .mono[data-active="1"] .panel[data-i="1"] > *,
    .mono[data-active="2"] .panel[data-i="2"] > *,
    .mono[data-active="3"] .panel[data-i="3"] > *,
    .mono[data-active="4"] .panel[data-i="4"] > *,
    .mono[data-active="5"] .panel[data-i="5"] > *,
    .mono[data-active="6"] .panel[data-i="6"] > *,
    .mono[data-active="7"] .panel[data-i="7"] > *{
      opacity:1;
      transform:none;
    }
    /* Press-and-hold the monogram to reveal EVERY direction at once. */
    .mono.reveal-all .panel > *{
      opacity:1 !important;
      transform:none !important;
    }

    /* Tighten panel typography + spacing so all 5 fit without overlap. */
    .panel h2{font-size:clamp(22px,2.4vw,38px) !important;margin:6px 0 0 !important;}
    .panel > div:nth-of-type(1){margin-bottom:4px !important;font-family:'Caveat','Segoe Script',cursive !important;font-size:clamp(22px,2vw,28px) !important;font-weight:600 !important;letter-spacing:0.02em !important;text-transform:none !important;}
    .panel > div:nth-of-type(2){margin-top:6px !important;font-size:clamp(13px,1vw,16px) !important;}
    .panel a{margin-top:10px !important;font-size:11px !important;}

    /* Reposition — left column (top→bottom): Services(4), Research(1), Insights(6);
       right column (top→bottom): AI(2), for Gaming(5), Institute(3), Marketplace(7).
       Side + text alignment live on the inline panel styles; these set the slot. */
    .panel[data-i="4"]{top:15% !important;bottom:auto !important;transform:none !important;}
    .panel[data-i="1"]{top:50% !important;bottom:auto !important;transform:translateY(-50%) !important;}
    .panel[data-i="6"]{top:auto !important;bottom:14% !important;transform:none !important;}
    .panel[data-i="2"]{top:9% !important;bottom:auto !important;transform:none !important;}
    .panel[data-i="5"]{top:34% !important;bottom:auto !important;transform:none !important;}
    .panel[data-i="3"]{top:59% !important;bottom:auto !important;transform:none !important;}
    .panel[data-i="7"]{top:auto !important;bottom:9% !important;transform:none !important;}
    .mono[data-active="1"] .panel[data-i="1"],.mono[data-active="2"] .panel[data-i="2"],.mono[data-active="3"] .panel[data-i="3"],.mono[data-active="4"] .panel[data-i="4"],.mono[data-active="5"] .panel[data-i="5"],.mono[data-active="6"] .panel[data-i="6"],.mono[data-active="7"] .panel[data-i="7"]{opacity:1;transform:none;}

    /* Per-direction accent. The active panel's label + Enter underline pick up
       the same color the monogram tweens to. */
    .mono{--accent:#ff6a3d;transition:--accent .4s ease;}
    .mono[data-active="1"]{--accent:#ff8a3d;}   /* Research — orange */
    .mono[data-active="2"]{--accent:#b86bff;}   /* AI — violet */
    .mono[data-active="3"]{--accent:#3ddc84;}   /* Institute — green */
    .mono[data-active="4"]{--accent:#ff4d3d;}   /* Services — red */
    .mono[data-active="5"]{--accent:#3da5ff;}   /* for Gaming — blue */
    .mono[data-active="7"]{--accent:#06b6d4;}   /* Marketplace — cyan */
    .panel > div:first-child{color:var(--accent) !important;transition:color .4s ease;}
    .panel a{border-color:var(--accent) !important;transition:color .3s,border-color .4s ease;}

    /* Tagband — a faithful copy of the business-card FRONT tagband: tagline +
       rainbow rule + sub-line, kept at the same 1:0.8 tag/sub proportion and
       sat at the bottom-centre of the hero like it sits on the card. */
    .tagband{
      position:absolute;left:50%;bottom:clamp(22px,4.2vh,42px);transform:translateX(-50%);
      z-index:3;text-align:center;pointer-events:none;white-space:nowrap;
      --tag-rainbow:linear-gradient(90deg,#ff7a3d 0%,#a855f7 22%,#1a8917 44%,#dc382a 66%,#6b4bdb 88%,#06b6d4 100%);
    }
    .tagband .tag{
      font-family:'Poppins',sans-serif;font-weight:600;
      font-size:clamp(10px,1.25vw,15px);letter-spacing:0.24em;text-transform:uppercase;
      color:rgba(236,231,226,0.92);
    }
    .tagband .tag-rule{
      width:clamp(34px,4.4vw,56px);height:2px;margin:clamp(7px,1vh,11px) auto;
      background:var(--tag-rainbow);border-radius:2px;
    }
    .tagband .tag-sub{
      font-family:'Poppins',sans-serif;font-weight:500;
      font-size:clamp(8px,1vw,12px);letter-spacing:0.2em;text-transform:uppercase;
      color:rgba(236,231,226,0.55);
    }
    .tagband .tag-sub .dot{margin:0 .5em;color:rgba(236,231,226,0.3);}
    html[data-theme="light"] .tagband .tag{color:rgba(13,13,17,0.9);}
    html[data-theme="light"] .tagband .tag-sub{color:rgba(13,13,17,0.55);}
    html[data-theme="light"] .tagband .tag-sub .dot{color:rgba(13,13,17,0.3);}
    html[data-theme="light"] .mono{background:radial-gradient(125% 120% at 50% 42%, #f6f5f2 0%, #eceae5 60%, #e3e1db 100%) !important;color:#1b1b1e;}
    .wm-logo{display:block;}
    .wm-black{display:none;}
    html[data-theme="light"] .wm-white{display:none;}
    html[data-theme="light"] .wm-black{display:block;}
    /* Eyebrow (div:first-child) and link anchor keep their per-direction --dir-N
       accent colors in both themes — those colors are vivid enough to read on
       cream as well as on dark.  Only the title (h2) and subtitle (div:nth-2)
       need explicit light-mode ink so they stay readable on a light background. */
    html[data-theme="light"] .panel > div:nth-of-type(2){color:#5a5550 !important;}
    html[data-theme="light"] .panel h2{color:#17171a !important;}
    html[data-theme="light"] .hint{color:rgba(40,38,36,0.55) !important;}
    /* Theme toggle lives in the always-dark footer, so the resting style
       (light-on-dark) is correct in both themes. Only the active pill changes
       based on the currently selected theme. */
    .tbtn{color:rgba(255,255,255,0.55);}
    html[data-theme="dark"]  .tbtn[data-set="dark"],
    html[data-theme="light"] .tbtn[data-set="light"]{background:#dc382a !important;color:#fff !important;}

    /* ===== Dashboard recede on footer reveal ===== */
    /* Always-on transform so the canvas (position:fixed inside .mono) has a stable containing block — prevents repaint jumps during scroll. */
    .mono{transform:scale(1) translateY(0);transform-origin:50% 40%;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .6s cubic-bezier(.2,.7,.2,1);}
    .mono.receded{transform:scale(0.94) translateY(-24px);opacity:0.55;}

    /* ===== Scroll hint ===== */
    .scroll-hint{position:fixed;bottom:18px;right:24px;z-index:40;display:flex;align-items:center;gap:8px;font-family:'Archivo',sans-serif;font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:rgba(255,255,255,0.5);pointer-events:none;transition:opacity .4s ease,transform .4s ease;animation:hintFadeIn 1.2s ease 1s backwards;}
    .scroll-hint .arrow{width:9px;height:9px;border-right:1px solid #ff6a3d;border-bottom:1px solid #ff6a3d;transform:rotate(45deg);animation:scrollBounce 1.8s ease-in-out infinite;}
    .scroll-hint.hidden{opacity:0;transform:translateY(16px);}
    html[data-theme="light"] .scroll-hint{color:rgba(40,38,36,0.55);}
    @keyframes hintFadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
    @keyframes scrollBounce{0%,100%{transform:rotate(45deg) translate(0,0);opacity:0.4;}50%{transform:rotate(45deg) translate(3px,3px);opacity:1;}}

    /* ===== Footer ===== */
    .site-footer{
      position:relative;z-index:3;
      background:radial-gradient(120% 90% at 50% 0%, #14141a 0%, #0b0b0e 55%, #08080a 100%);
      border-top:1px solid rgba(255,255,255,0.06);
      padding:72px 40px 0;
      opacity:0;transform:translateY(60px);
      transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);
      font-family:'Archivo',sans-serif;color:#ece7e2;
    }
    .site-footer.visible{opacity:1;transform:translateY(0);}
    /* Rainbow accent rule — reads as all five directions. */
    .site-footer::before{
      content:'';position:absolute;top:0;left:0;right:0;height:1px;
      background:linear-gradient(90deg,
        transparent 0%,
        #ff7a3d 14%,
        #a855f7 32%,
        #1a8917 50%,
        #dc382a 68%,
        #6b4bdb 86%,
        transparent 100%);
      opacity:0.7;
    }
    .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;max-width:1400px;margin:0 auto;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.06);}
    .footer-brand .footer-wordmark{height:20px;width:auto;margin-bottom:20px;opacity:0.9;}
    .footer-tagline{
      font-family:'Poppins',sans-serif;font-weight:700;
      font-size:clamp(18px,1.6vw,22px);line-height:1.25;letter-spacing:-0.02em;
      color:#fff;margin:0 0 14px;max-width:380px;
    }
    .footer-tagline .hi{color:#ff7a3d;}
    .footer-blurb{font-size:13px;line-height:1.7;color:rgba(255,255,255,0.55);max-width:380px;margin:0 0 22px;}
    .footer-badge{
      display:inline-flex;align-items:center;gap:8px;padding:6px 12px;
      border:1px solid rgba(255,255,255,0.14);border-radius:100px;
      font-family:'Archivo',sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:0.22em;
      color:rgba(255,255,255,0.6);
    }
    .footer-badge .dot{width:6px;height:6px;background:#ff7a3d;border-radius:50%;box-shadow:0 0 10px #ff7a3d;animation:monoPulse 2s infinite;}
    .footer-col h4{
      font-family:'Archivo',sans-serif;font-weight:600;
      font-size:11px;text-transform:uppercase;letter-spacing:0.26em;
      color:rgba(255,255,255,0.5);
      margin:0 0 18px;display:flex;align-items:center;gap:10px;
    }
    .footer-col h4::before{content:'';width:18px;height:1px;background:rgba(255,255,255,0.3);}
    .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
    .footer-col ul a{
      font-family:'Archivo',sans-serif;font-size:13px;font-weight:500;
      color:rgba(255,255,255,0.75);text-decoration:none;
      display:inline-flex;align-items:center;
      transition:color .25s ease;
    }
    .footer-col ul a:hover{color:#fff;}
    .footer-bottom{
      max-width:1400px;margin:0 auto;padding:22px 0 28px;
      display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
      font-family:'Archivo',sans-serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
      color:rgba(255,255,255,0.45);
    }
    .footer-bottom .left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
    .footer-bottom .sep{opacity:0.3;}
    .footer-bottom a{color:rgba(255,255,255,0.8);text-decoration:none;transition:color .2s;}
    .footer-bottom a:hover{color:#ff7a3d;}
    .footer-bottom .socials{display:flex;align-items:center;gap:6px;}
    .footer-bottom .socials a{
      width:32px;height:32px;border-radius:50%;
      background:transparent;border:1px solid rgba(255,255,255,0.14);
      display:inline-flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,0.65);
      transition:background .2s ease, color .2s ease, border-color .2s ease;
    }
    .footer-bottom .socials a:hover{background:rgba(255,255,255,0.06);color:#fff;border-color:rgba(255,255,255,0.28);}
    .footer-bottom .socials svg{width:13px;height:13px;fill:currentColor;}
    @media (max-width:900px){
      .site-footer{padding:48px 24px 0;}
      .footer-grid{grid-template-columns:1fr 1fr;gap:36px 32px;padding-bottom:36px;}
      .footer-brand{grid-column:1 / -1;}
      .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;}
      .scroll-hint{display:none;}
    }
    @media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

    /* ===== Per-direction accent colors ===== */
    .mono{
      --dir-1:#ff7a3d;  /* 01 Research  — orange  */
      --dir-2:#a855f7;  /* 02 AI        — violet  */
      --dir-3:#1a8917;  /* 03 Institute — green   */
      --dir-4:#dc382a;  /* 04 Services  — red     */
      --dir-5:#6b4bdb;  /* 05 for Gaming — purple  */
      --dir-6:#06b6d4;  /* 06 Blog      — cyan    */
      --dir-7:#06b6d4;  /* 07 Marketplace — cyan  */
    }
    /* Tint each panel's eyebrow + Enter link in its own direction colour. */
    .panel[data-i="1"] > div:first-child,.panel[data-i="1"] a{color:var(--dir-1) !important;}
    .panel[data-i="2"] > div:first-child,.panel[data-i="2"] a{color:var(--dir-2) !important;}
    .panel[data-i="3"] > div:first-child,.panel[data-i="3"] a{color:var(--dir-3) !important;}
    .panel[data-i="4"] > div:first-child,.panel[data-i="4"] a{color:var(--dir-4) !important;}
    .panel[data-i="5"] > div:first-child,.panel[data-i="5"] a{color:var(--dir-5) !important;}
    .panel[data-i="6"] > div:first-child,.panel[data-i="6"] a{color:var(--dir-6) !important;}
    .panel[data-i="7"] > div:first-child,.panel[data-i="7"] a{color:var(--dir-7) !important;}
    .panel[data-i="1"] a{border-bottom-color:var(--dir-1) !important;}
    .panel[data-i="2"] a{border-bottom-color:var(--dir-2) !important;}
    .panel[data-i="3"] a{border-bottom-color:var(--dir-3) !important;}
    .panel[data-i="4"] a{border-bottom-color:var(--dir-4) !important;}
    .panel[data-i="5"] a{border-bottom-color:var(--dir-5) !important;}
    .panel[data-i="6"] a{border-bottom-color:var(--dir-6) !important;}
    .panel[data-i="7"] a{border-bottom-color:var(--dir-7) !important;}
    /* Whole panel should look clickable, since the click handler opens detail mode. */
    .panel{cursor:pointer !important;}

    /* ===== Detail overlay (opens on click) — split-layout design ===== */
    .mono canvas{transition:opacity .8s ease, filter .8s ease, transform .9s cubic-bezier(.4,0,.2,1);}
    .mono.detail-open canvas{opacity:0.55;filter:saturate(1.15);}
    .mono.detail-open[data-side="left"]  canvas{transform:translateX(22vw) scale(0.78);}
    .mono.detail-open[data-side="right"] canvas{transform:translateX(-22vw) scale(0.78);}

    /* Hide all panels + hint while a detail is open. */
    .mono.detail-open .panel,
    .mono.detail-open .hint{opacity:0 !important;pointer-events:none !important;transition:opacity .3s ease;}

    .detail-overlay{
      position:absolute;inset:0;z-index:5;
      pointer-events:none;opacity:0;
      transition:opacity .45s ease;
    }
    .mono.detail-open .detail-overlay{opacity:1;pointer-events:auto;}

    .detail-card{
      position:absolute;
      top:clamp(90px,14vh,160px);
      bottom:clamp(60px,10vh,120px);
      width:min(46vw, 580px);
      display:flex;flex-direction:column;justify-content:flex-start;gap:18px;
      opacity:0;transform:translateY(16px);
      transition:opacity .55s ease .2s, transform .55s ease .2s;
      --detail-accent:#ffffff;
      overflow:hidden;
    }
    /* Header (eyebrow/title/sub) stays fixed; only .detail-scroll moves. */
    .detail-eyebrow,.detail-title,.detail-sub{flex-shrink:0;}
    .detail-scroll{
      display:flex;flex-direction:column;gap:18px;
      overflow-y:auto;min-height:0;flex:1;
      scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.18) transparent;
      padding-right:4px;
    }
    .mono[data-side="right"] .detail-scroll{align-items:flex-end;text-align:right;}
    .detail-scroll::-webkit-scrollbar{width:6px;}
    .detail-scroll::-webkit-scrollbar-track{background:transparent;}
    .detail-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:6px;}
    .detail-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.28);}
    html[data-theme="light"] .detail-scroll{scrollbar-color:rgba(20,20,28,0.2) transparent;}
    html[data-theme="light"] .detail-scroll::-webkit-scrollbar-thumb{background:rgba(20,20,28,0.18);}
    .mono.detail-open .detail-card{opacity:1;transform:none;}
    .mono[data-side="left"]  .detail-card{left:clamp(24px,5vw,80px);  align-items:flex-start;text-align:left;}
    .mono[data-side="right"] .detail-card{right:clamp(24px,5vw,80px); align-items:flex-end;  text-align:right;}

    .detail-eyebrow{
      font-family:'Caveat','Segoe Script',cursive;
      font-size:26px;font-weight:600;letter-spacing:0.02em;text-transform:none;
      color:var(--detail-accent);
    }
    .detail-title{
      font-family:'Poppins',sans-serif;font-weight:800;
      font-size:clamp(44px,5.5vw,84px);line-height:0.92;letter-spacing:-0.03em;
      color:#fff;margin:0;
    }
    .detail-sub{
      font-family:'Poppins',sans-serif;font-weight:500;
      font-size:clamp(17px,1.6vw,22px);color:rgba(255,255,255,0.6);
      margin:0;
    }
    .detail-body{
      font-family:'Archivo',sans-serif;
      font-size:15px;line-height:1.7;color:rgba(255,255,255,0.72);
      margin:10px 0 0;max-width:480px;
    }
    .mono[data-side="right"] .detail-body{margin-left:auto;}

    /* ===== Publications list (used by the Blog detail card) ===== */
    .detail-publications{
      list-style:none;margin:6px 0 0;padding:0;
      display:flex;flex-direction:column;gap:14px;
      max-width:480px;width:100%;
    }
    .mono[data-side="right"] .detail-publications{margin-left:auto;}
    .detail-publications:empty{display:none;}
    .detail-pub{
      display:flex;flex-direction:column;gap:3px;
      padding:12px 0;
      border-top:1px solid rgba(255,255,255,0.08);
    }
    .detail-pub:last-child{border-bottom:1px solid rgba(255,255,255,0.08);}
    .detail-pub-meta{
      font-family:'Archivo',sans-serif;font-size:10px;font-weight:600;
      letter-spacing:0.24em;text-transform:uppercase;
      color:var(--detail-accent);opacity:0.85;
    }
    .detail-pub-title{
      font-family:'Poppins',sans-serif;font-weight:700;
      font-size:17px;line-height:1.25;color:#fff;
      text-decoration:none;transition:color .2s;
    }
    .detail-pub-title:hover{color:var(--detail-accent);}
    .detail-pub-dek{
      font-family:'Archivo',sans-serif;font-size:13px;line-height:1.55;
      color:rgba(255,255,255,0.55);margin-top:1px;
    }
    .detail-cta{
      display:inline-flex;align-items:center;gap:12px;
      margin-top:6px;padding:14px 26px;
      background:transparent;color:#fff;text-decoration:none;
      font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;
      letter-spacing:0.22em;text-transform:uppercase;
      border:1px solid var(--detail-accent);
      transition:background .2s ease, color .2s ease;
      cursor:pointer;width:fit-content;
    }
    .detail-cta:hover{background:var(--detail-accent);color:#0a0a0c;}

    /* AI (Direction 02) — the "Visit AI" CTA gets a rainbow gradient border
       (padding-box / border-box double background). AI only. */
    .mono[data-active="2"] .detail-cta{
      border:1.6px solid transparent;
      background:
        linear-gradient(var(--cta-bg,#0c0c0f),var(--cta-bg,#0c0c0f)) padding-box,
        conic-gradient(from 210deg,#ff7a3d,#f43f8e,#a855f7,#6b4bdb,#06b6d4,#ff7a3d) border-box;
    }
    .mono[data-active="2"] .detail-cta:hover{
      color:#fff;
      background:
        linear-gradient(var(--cta-bg,#0c0c0f),var(--cta-bg,#0c0c0f)) padding-box,
        conic-gradient(from 210deg,#ff7a3d,#f43f8e,#a855f7,#6b4bdb,#06b6d4,#ff7a3d) border-box;
    }
    html[data-theme="light"] .mono[data-active="2"] .detail-cta{--cta-bg:#f4f2ee;color:#17171a;}

    .detail-close{
      position:absolute;top:clamp(16px,2.4vh,24px);right:clamp(20px,2.4vw,32px);
      width:40px;height:40px;border:1px solid rgba(255,255,255,0.18);
      background:transparent;color:rgba(255,255,255,0.6);
      font-size:22px;line-height:1;cursor:pointer;
      display:inline-flex;align-items:center;justify-content:center;
      transition:all .2s;border-radius:50%;padding:0;
      font-family:'Archivo',sans-serif;z-index:6;
    }
    .detail-close:hover{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.32);}

    /* ===== Light-theme overrides for the detail card =====
       Hero text uses white in dark mode; in light mode we need ink colors.
       The footer is intentionally NOT affected — it stays dark regardless. */
    html[data-theme="light"] .detail-title{color:#17171a;}
    html[data-theme="light"] .detail-sub{color:rgba(20,20,28,0.6);}
    html[data-theme="light"] .detail-body{color:rgba(20,20,28,0.78);}
    html[data-theme="light"] .detail-cta{color:#17171a;}
    html[data-theme="light"] .detail-cta:hover{color:#fff;}
    html[data-theme="light"] .detail-close{
      border-color:rgba(20,20,28,0.2);color:rgba(20,20,28,0.55);
    }
    html[data-theme="light"] .detail-close:hover{
      background:rgba(20,20,28,0.06);color:#17171a;border-color:rgba(20,20,28,0.4);
    }
    html[data-theme="light"] .detail-pub{border-top-color:rgba(20,20,28,0.1);}
    html[data-theme="light"] .detail-pub:last-child{border-bottom-color:rgba(20,20,28,0.1);}
    html[data-theme="light"] .detail-pub-title{color:#17171a;}
    html[data-theme="light"] .detail-pub-dek{color:rgba(20,20,28,0.6);}