@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap");



   /* ============================================
   Global Variables
   ============================================ */
   
   :root {
  
      /*In Use*/
      --navy-900: #091f43;
      --blue-600: #1769d2;
      --cyan-400: #3ed5f4;
      --indigo-500: #655eea;
      --ink: #12233f;
      --soft: #f4f8fc;
      --white: #fff;
      --shadow-sm: 0 12px 35px rgba(12, 45, 91, .08);
      --shadow-lg: 0 25px 70px rgba(5, 26, 61, .18);
      --color-white: #ffffff;
      --color-black: #000000;  
      --color-navy: #0a1e3d;
      --color-blue: #2b7de9;
      --color-blue-light: #4a9eff;
      --color-blue-pale: #A3C7F2;
      --color-text-muted: #6b7c93;
      --color-border: #dde3ec;
      --color-light-grey: #dde3ec;
      --color-touch-of-grey: #f4f4f4;
      --color-light-green: #96E6AF;
      --color-green: #1f9c63;
      --color-purple: #C9A7F5;

      --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

      --radius: 22px;
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-xl: 24px;

      --shadow-sm: 0 1px 3px rgba(10, 30, 61, 0.06);
      --shadow-md: 0 4px 16px rgba(10, 30, 61, 0.08);
      --shadow-lg: 0 8px 32px rgba(10, 30, 61, 0.1);

      --post-max-width: 500px;
      --post-title-font-size: 16px;

      --css-post-image-height: 220px;
      --css-post-image-height-tablet: 180px;
      --css-post-image-height-mobile: 180px;
      
      --css-post-text-height: 100px;
      --css-post-text-tablet: 155px;
      --css-post-text-mobile: 155px;

      --desktop-header-height: 75px;
      --mobile-header-height: 95px;

      --transition: 0.25s ease;  

      --resolution-label: "Resolution: Standard";      
   }


   /* ============================================
   Global Settings
   ============================================ */
    * { box-sizing: border-box; }
    html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }

    body {
        position: relative;
        color: var(--ink);
        background: var(--white);
        font-family: "DM Sans", sans-serif;
        line-height: 1.7;
        max-width: 100%;
        overflow-x: clip;
        padding-top: var(--desktop-header-height, 100px);

        /* sticky footer */
        min-height: 100vh;
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
    }

    body::after {
        content: var(--resolution-label);
        position: absolute;
        bottom: 0;
        right: 0;                /* ← move to the right */
        background: #0a132d;
        color: var(--color-light-grey);
        font-size: 10px;
        padding: 4px;
        z-index: 9999;
    }


    a { 
      color: inherit; 
      text-decoration: none; 
    }


    img { 
      max-width: 100%; 
      display: block; 
    }

    button, a { 
      transition: .25s ease; 
    }

    h1, h2, h3, h4, .logo-name { 
      font-family: "Manrope", 
      sans-serif; 
    }

    .h1-neutral {
      font-size: inherit;
      margin: 0;
      padding: 0;
      line-height: inherit;
    }

    .container {
      width: 100%;
      max-width: var(--container-max);
      margin: 0 auto;
    }   

    .application-name {
        color: #2485ee !important;
        font-size: 16px !important;
        display: inline-block; 
    }

    .release_type {
        color: var(--color-text-muted) !important;
        font-size: 16px !important;
        display: inline-block; 
    }

    .seo-text {
        position: absolute;
        left: -9999px;
        top: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    li {
      padding: 3px 0;
    }

    @keyframes PurplePulse {
        0%   { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.25); }
        50%  { box-shadow: 0 0 20px 10px rgba(139, 92, 246, 0.25); }
        100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.0); }
    }
   
   /* ============================================
   Site Header & Logo
   ============================================ */      
    .site-header {
      padding: 0 0;
      background: rgba(255,255,255,.97);
      border-bottom: 1px solid rgba(220,230,242,.72);
      backdrop-filter: blur(14px);
      transition: padding .25s ease, box-shadow .25s ease; 
    }

    .site-header.scrolled { padding: 7px 0; box-shadow: 0 8px 28px rgba(8,31,67,.1); }


    /*Logo Ikawsoft by Devon*/
    .logo { display: inline-flex; align-items: center; gap: 12px; }

    .logo-lockup { 
      display: inline-flex; 
      flex-direction: column; gap: 4px; 
    }

    .logo-mark {
      width: 42px; height: 42px; display: flex; align-items: flex-end; justify-content: center; gap: 3px;
      padding: 8px 7px; background: linear-gradient(145deg,#edf7ff,#f5f2ff);
      border: 1px solid #d9e9fa; border-radius: 12px; box-shadow: 0 7px 18px rgba(23,105,210,.1);
      transform: skew(-8deg);
    }

    .logo-tagline {
      color: #43516a; font-size: .67rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em;
      white-space: nowrap;
    }

    .logo-mark span { display: block; width: 7px; border-radius: 3px 3px 1px 1px; background: var(--blue-600); }
    .logo-mark span:nth-child(1) { height: 15px; }
    .logo-mark span:nth-child(2) { height: 25px; background: var(--cyan-400); }
    .logo-mark span:nth-child(3) { height: 20px; background: var(--indigo-500); }
    .logo-name { display: inline-flex; align-items: baseline; gap: 9px; color: var(--navy-900); line-height: 1; }
    .logo-word { color: var(--navy-900); font-size: 1.5rem; font-weight: 800; letter-spacing: -.055em; }
    .logo-word strong { color: var(--blue-600); font-weight: 800; }
    .logo-byline {
      position: relative; padding-left: 10px; color: #607089;
      font-size: .76rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
    }

    .logo-byline::before {
      content: ""; position: absolute; width: 1px; height: 14px; left: 0; top: 50%;
      background: #cad7e5; transform: translateY(-50%);
    }

    
    .hero {
      padding: 20px 0 0;
    }

    .hero__banner {
      display: flex;
      align-items: center;
      gap: 20px;
      padding: 20px 24px;
      background: linear-gradient(135deg, #0a1e3d 0%, #1a3a6b 50%, #2b5a9e 100%);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-lg);
    }

    .hero__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      flex-shrink: 0;
      background: rgba(74, 158, 255, 0.25);
      border-radius: var(--radius-md);
      color: var(--color-blue-light);
    }

    .hero__icon svg {
      width: 28px;
      height: 28px;
    }

    .hero__title {
      font-size: clamp(1.75rem, 4vw, 2.5rem);
      font-weight: 700;
      color: var(--color-white);
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

   /* ============================================
   Navigation
   ============================================ */   
      .navbar {
          padding-left: 0 !important;
      }

      .navbar .nav-link {
        font-size: 14px !important;
      }


      .navbar-nav {
          flex-wrap: wrap;
      }

      .navbar-logo.logo {
          margin-left: 25px;
      }

      .navbar {
          padding-left: 0 !important;
          padding-right: 0 !important;
      }

      .navbar-nav .nav-item {
          white-space: nowrap;
          padding-left: 3px;
          padding-right: 3px;
      }

      .navbar-nav .nav-link {
          display: flex;
          align-items: center;
          font-size: 1rem;
      }

      .roll-again-badge {
          width: 60px; 
          height: auto; 
      }


      .navbar-nav { gap: 6px; }
      .navbar .nav-link {
        color: var(--color-blue); font-size: .91rem; font-weight: 600; padding: 9px 12px !important; border-radius: 9px;
      }

      .navbar .nav-link:hover, .navbar .nav-link.active { color: var(--blue-600); background: #edf5ff; }

      .navbar-toggler { border: 0; box-shadow: none !important; }     


      .whats-new .container {
        display: flex;
        align-items: center;
        gap: 16px;
      }

      .whats-new__title {
        font-size: 15px;
        font-weight: 700;
        color: var(--color-blue);
        margin-bottom: 0;  /* remove this */
        white-space: nowrap;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 500;
        /*color: var(--color-text-muted);*/
        color: var(--color-blue);
        background: var(--color-white);
        border: 1px solid var(--color-border);
        border-radius: 100px;
        box-shadow: var(--shadow-sm);
        transition: border-color var(--transition), box-shadow var(--transition), color var(--transition);
      }

      .tag:hover {
        border-color: var(--color-blue-light);
        color: var(--color-blue);
        box-shadow: var(--shadow-md);
      }

      .tag__icon {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
        opacity: 0.6;
      }      

  /* ============================================
   Topic
   ============================================ */

    .topic-heading {
        margin-top:0px;
        margin-bottom:3px;
        color: #2485ee;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 10px;
        font-family: "Manrope", sans-serif;
        border-top: 1px solid #2485ee;
        border-bottom: 1px solid #2485ee;
        padding: 4px 0;
    }     

    .topic-nav { 
        margin-bottom:7px;
    }

    .topic-nav-row {
        display: flex;
        align-items: center;
        gap: 10px; /* spacing between title and dropdown */
    }


    .topic-nav-title { 
      font-size: .91rem;
      font-weight: 600;
      color: var(--color-blue);
      margin-bottom: 0;  /* remove this */
      white-space: nowrap;
    }    

    .topic-list { 
        display: flex; 
        flex-wrap: wrap; 
        gap: 10px; 
        align-items: center;   /* ← vertical middle alignment */
    }

    .topic-list a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: #53637b; background: var(--soft); border: 1px solid #e5edf5; border-radius: 9px; font-size: .77rem; font-weight: 700; }
    .topic-list a:hover { color: var(--blue-600); background: #eaf4ff; border-color: #b9d8fb; transform: translateY(-2px); }


    .Topic {
      padding: 8px 0 64px;
    }

    .Topic-Nav-Menu-Item {
        display: flex;
        align-items: center;
        gap: 10px; /* optional spacing */
        padding-left: 12px; /* keep your padding */
        padding-right: 20px;
    }

    .Topic-Label {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-blue);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .Topic-Label-Icon {
      font-size: 35px;
      line-height: 1;
      color: var(--color-blue);
    }

    .Topic-Label-Title {
      line-height: 1;
    }

    .Topic-Header {
      display: flex;
      align-items: center;
      gap: 16px;
      width: 100%;
      padding: 16px 0;
      text-align: left;
      transition: opacity var(--transition);
    }

    .Topic-Header:hover {
      opacity: 0.8;
    }

    .Topic-Line {
      flex: 1;
      height: 1px;
      background: var(--color-blue-light);
    }

    /* Column wrapper: dropdown row on top, About link underneath, both right-aligned */
    .topic-nav-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
        margin-left: auto;        /* pushes the whole stack to the right of the navbar */
    }

    /* About link */
    .about-link {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-left: 28px;       
        color: #3b5bdb;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.14em;
        text-decoration: none;
    }
    .about-link__icon {
        width: 10px;
        height: 10px;
        box-sizing: border-box;
        border: 1.5px solid currentColor;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0;
        transition: background-color .15s ease, color .15s ease;
    }

    .about-link:hover .about-link__text { color: var(--color-green); text-underline-offset: 3px; }
    .about-link:hover .about-link__icon,
    .about-link:focus-visible .about-link__icon { background: #3b5bdb; color: #fff; }
    
    .about-link:focus-visible { outline: 2px solid #3b5bdb; outline-offset: 4px; border-radius: 4px; }

    /* Logo on top, About link underneath, both left-aligned */
    .brand-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

  /* ============================================
   Form Elements
   ============================================ */

    .form-select-sm.form-select-xs {
      height: 28px;
      min-height: 28px;
      padding-top: 2px;
      padding-bottom: 2px;
      padding-left: 8px;
      padding-right: 24px; /* keep room for the dropdown arrow */
      font-size: 0.8125rem; /* 13px */
      line-height: 1.2;
      background-position: right 6px center;
      background-size: 12px 10px;
    }

    .form-select {
      font-size: 0.875rem;
      border-radius: 30px !important;
    }    

   /* ============================================
   Post
   ============================================ */
   
    /*.post:has(.post__anchor:target) {
        animation: highlightPulse 3s ease-out !important;
    }*/

    .css-post-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
      padding-bottom: 7px;
      justify-items: center;
    }

    .css-single-post-grid {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 24px;
      padding-bottom: 7px;
    }
    
    .post {
      display: flex;
      flex-direction: column;
      background: var(--color-white);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      transition: transform var(--transition), box-shadow var(--transition);
      margin-bottom:17px;
      width:600px;
    }

    .post:hover {
      animation: PurplePulse 1.0s ease-out !important;
    }

    .css-post-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding-top: 14px;
      padding-bottom: 5px;
      padding-left: 14px;
      padding-right: 14px;
    }

    .css-post-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-blue);
      line-height: 1.35;
      margin-bottom: 8px;
    }

    .css-post-popup-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-blue);
    }

    .css-post-text {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      height: var(--css-post-text-height, 100px);
      font-size: 13.5px;
      color: var(--color-text-muted);
      line-height: 1.45;
      margin-bottom: 0px;
    }

    .bi-share-fill {
      color: var(--color-white);
      font-size: 11px;
      cursor: pointer;
    }    

    .bi-share-fill:hover {
      color: var(--color-light-green);
    }    
    
    .css-full-view-text {
      display: block;
      font-family: "DM Sans", sans-serif !important;         
      font-size: 11px !important;
      font-weight: 300 !important;
      margin: auto auto 0 !important;
      overflow: hidden;
      text-align: center;
      color: var(--color-white);
      padding: 0 0;
      position: relative;
      width: 100% !important;
      height: 17px !important;
      background: var(--color-blue-pale);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    }

    .css-post-image-text-overlay {
      display: block;
      font-size: 11px;
      font-weight: 300;
      font-family: "DM Sans", sans-serif;      
      margin: 0px auto 0;
      overflow: hidden;
      text-align: center;
      color: var(--color-white);
      padding: 0 0;
      position: relative;
      width: 100%;
      height: 17px;
 
      background: #A3C7F2;
      border-radius: 0 0 var(--radius-sm) var(--radius-sm) ;
    }

    .post-for-more-cta, .css-post-image-text-overlay, .css-full-view-text {
      cursor: pointer;
    }

    .post-for-more-cta {
      width: 160px;        /* identical width */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 5px;
      font-size: 12px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }

    .post-date-cta {
      width: auto;        /* identical width */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: right;
      padding-right: 15px;
      font-size: 12px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }


    .post-for-more-cta-empty {
      width: 160px;        /* identical width */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 5px 5px;
      font-size: 12px;
      font-weight: 600;
      border-radius: var(--radius-sm);
      white-space: nowrap;
    }

    .post-for-more-cta {
      gap: 6px;
    }

    .post-date-cta {
      gap: 0;
    }

    .post-for-more-cta svg {
      width: 13px;
      height: 13px;
      flex-shrink: 0;
    }

    .post-for-more-cta:hover, .css-post-image-text-overlay:hover, .css-full-view-text:hover {
      background: var(--color-green);
      color: var(--color-white);
    }


    .post-date-cta {
      white-space: nowrap;
    }

    .css-post-text-popup {
        display: none;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .css-post-text-popup {
        display: none;
        font-size: 15.5px;
        color: var(--color-text-muted);
        line-height: 1.45;
        margin-bottom: 0px;
        overflow-y: auto;
        
        position: fixed;
        top: 50%;
        left: 50%;
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
        transition: opacity 0.25s ease, transform 0.25s ease;

        max-width: 50vw;
        width: 50vw;
        max-height: 90vh;
        z-index: 99999;

        background: white;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);

        border-radius: 12px;   
        padding: 20px;         
      }

    .css-post-text-popup.active {
        display: block;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        overflow: visible;
    }


    .css-post-click-image-to-view-text {
      text-align: center;
      background-color: var(--color-touch-of-grey, #f4f4f4);
      color: var(--color-black);
      font-size: 11px;
      font-weight: 300;
      padding: 0px 0px;      
    }


    .css-post-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 25px;
      color: var(--color-white);
      background: var(--color-blue);
      border-radius: 0 0 var(--radius-sm) var(--radius-sm);
      white-space: nowrap;
    }    
 
    .post-footer-left,
    .post-footer-right {
        width: 50%;
        display: flex;
        align-items: center;
        }

    .post-footer-right {
        justify-content: flex-end;
        padding-right: 0px;
    }


   /* ============================================
   Page Footer
   ============================================ */
        .footer {
          background: var(--color-navy);
          color: rgba(255, 255, 255, 0.75);
          padding-top: 56px;
        }

        .site-footer {
          margin-top: auto;       /* absorbs the leftover space, pushing the footer down */
        }

        .css-footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr;
          gap: 40px;
          padding-bottom: 48px;
        }

        .css-footer-logo {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }

        .css-footer-desc {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.55);
          max-width: 280px;
        }

        .footer__heading {
          font-size: 15px;
          font-weight: 700;
          color: var(--color-white);
          margin-bottom: 16px;
        }

        .footer__links li {
          margin-bottom: 10px;
        }

        .footer__links a {
          font-size: 14px;
          color: rgba(255, 255, 255, 0.55);
          transition: color var(--transition);
        }

        .footer__links a:hover {
          color: var(--color-white);
        }

        .footer__bottom {
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          padding: 20px 0;
          text-align: center;
        }

        .footer__bottom p {
          font-size: 13px;
          color: rgba(255, 255, 255, 0.4);
        }


        .footer-explore {
            display: flex;
            flex-wrap: wrap;
            gap: 0px 0px; /* vertical gap, horizontal gap */
            margin-top: 5px;
        }

        /*.footer-explore a {
            font-size: .83rem;
            color: #91a5bf;
            white-space: nowrap; 
        }*/
        .footer-explore a {
            display: inline-block;
            margin-right: 18px;
            margin-bottom: 10px;
            font-size: .83rem;
            color: #91a5bf;    
        }
        
        .footer-logo {
            margin-right: 0px;
            display: flex;
            flex-direction: column;
            gap: 6px; /* optional, keeps logo + text tidy */
        }


        .footer-explore a:hover {
            color: var(--cyan-400);
        }

        .site-footer { padding: 25px 0 25px; color: #91a5bf; background: #05152e; }
        .site-footer p { max-width: 430px; margin: 5px 0 0; font-size: .91rem; }
        .site-footer h2 { margin: 0 0 0; color: var(--white); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
        .site-footer .col-6 a { display: block; width: fit-content; margin: 9px 0; font-size: .83rem; }
        .site-footer a:hover { color: var(--cyan-400); }
        .logo-footer .logo-word { color: var(--white); }
        .logo-footer .logo-byline { color: #a9bad0; }
        .logo-footer .logo-byline::before { background: rgba(255,255,255,.25); }
        .logo-footer .logo-mark { }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            gap: 20px;
            margin-top: 10px;
            padding-top: 8px;
            border-top: 1px solid rgba(255,255,255,.09);
            font-size: .73rem;
        }

        .footer-bottom i {
            margin-left: 5px;
        }




/* ============================================
   Article by Devon
   ============================================ */

   .css-article-div {
      margin-left: 75px;
      margin-right: 75px;
      margin-top: 0px;
      margin-bottom: 15px;
      text-align: left;
      color: var(--color-black);
    }

    .css-article-image {
        width: auto;
        height: auto;
        max-height: 500px;        /* prevents huge vertical images on monitors */
        max-width: 800px;
        object-fit: contain;      /* preserves aspect ratio, no cropping */
        display: block;
        margin: 0 auto 30px auto; /* spacing before article text */
    }

  .css-article-image.hero {
      width: 100%;
      height: 40vh;             /* responsive height */
      max-height: 700px;
      object-fit: cover;        /* fills width, crops edges */
      object-position: center;
      display: block;
      margin-bottom: 30px;
  }

/* ============================================
   Toast
   ============================================ */
    .toast-share {
        position: fixed;
        top: 10%;
        right: 20px;

        background: var(--color-green);
        color: white;

        padding: 10px 16px;
        border-radius: 6px;

        font-size: 14px;
        z-index: 99999;

        opacity: 0;
        transform: translateY(10px);
        transition: opacity .2s ease, transform .2s ease;

        pointer-events: none;
    }

  .toast-share.show {
      opacity: 1;
      transform: translateY(0);
  }
  
/* ============================================
   Image
   ============================================ */


      /*post image sizing · CSS*/
      /* ==========================================================================
        post Image Sizing System
        
        To add a new category:
          1. Add a new .css-post-image--{name} block below
          2. Add a matching entry to IMAGE_CATEGORY_MAP in post_image_sizing.php
        ========================================================================== */
      
      
      /* --------------------------------------------------------------------------
        Shared container styles
        All categories assume .css-post-image-popup has a fixed height defined here.
        Adjust --css-post-image-height to taste — this is your single control point
        for the image area height across all post types.
        -------------------------------------------------------------------------- */
 
      .css-post-image-wrap {
          width: 100%;
          height: var(--css-post-image-height, 240px);
          overflow: hidden;
          background-color: var(--color-touch-of-grey, #f4f4f4);
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

      }

      .css-post-image {
          display: block;
      }


      .css-post-image-popup {
          position: fixed;
          top: 50%;
          left: 50%;
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.95);
          transition: opacity 0.25s ease, transform 0.25s ease;
          max-width: 95vw;
          max-height: 95vh;
          display: none;
          z-index: 99999;
          background: white;
          box-shadow: 0 0 20px rgba(0,0,0,0.5);
          border-radius: 12px !important; 
      }

      .css-post-image-popup img {
          max-width: 100%;
          max-height: 100%;
      }

      .css-post-image-popup.active {
          display: block;
          opacity: 1;
          transform: translate(-50%, -50%) scale(1);
          overflow: visible;
      }
      
      /* --------------------------------------------------------------------------
        Category: Landscape (default)
        Standard photographs, wide office/people shots.
        Ratio: 1.2 – 2.5
        Fills the container, crops overflow. Looks clean for photography.
        -------------------------------------------------------------------------- */
      
      .css-post-image--landscape {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center center;
      }
      
      
      /* --------------------------------------------------------------------------
        Category: Wide / Panoramic / Logo
        Very wide images, banners, logos, graphics.
        Ratio: above 2.5
        Fits fully inside container, background fills letterbox space.
        Padding gives the image breathing room against the background.
        -------------------------------------------------------------------------- */
      
      .css-post-image--wide {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center center;
          padding: 1rem;
          box-sizing: border-box;
      }
      
      
      /* --------------------------------------------------------------------------
        Category: Portrait / Tall
        Book covers, portrait photos, tall composite images.
        Ratio: below 0.8
        Constrained width so narrow images don't stretch sideways.
        Centered with background filling the sides.
        -------------------------------------------------------------------------- */
      
      .css-post-image--portrait {
          width: auto;
          height: 100%;
          max-width: 70%;
          object-fit: contain;
          object-position: center center;
      }
      
      
      /* --------------------------------------------------------------------------
        Category: Square / Near-Square
        Diagrams, charts, some logos.
        Ratio: 0.8 – 1.2
        Fits inside container with equal padding all around.
        -------------------------------------------------------------------------- */
      
      .css-post-image--square {
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center center;
          padding: 0.75rem;
          box-sizing: border-box;
      }

   /* ============================================
   Collage
   ============================================ */
      .collage-item {
          aspect-ratio: 3 / 4;
          width: 100%;
          background-size: contain;
          background-position: center;
          mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
      }

      #starsky-collage {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
          gap: 0px;
          padding: 0px;
      }      
   
    /* ============================================
      Professional Background
      ============================================ */

      .profesional_background_container {
          max-width: 95%;
          margin: 0px auto;
          padding: 20px;
          line-height: 1; 
      }

      .profesional_background_container p {
          margin: 4px 0;     /* tighter spacing */
          line-height: 1.4;  /* single‑line feel */
      }

      .profesional_background_section {
          background: #fff;
          border: 1px solid #DDD;
          border-radius: 10px;
          padding: 25px;
          margin-bottom: 25px;
          box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      }

      .profesional_background_container h2 {
          margin-top: 0;
          font-size: 22px;
          border-left: 6px solid #C9A7F5;
          padding-left: 12px;
          color: #1769d2;
      }

      .profesional_background_header {
          text-align: center;
          padding: 40px 20px;
          background: linear-gradient(90deg, #E8D9FF, #C9A7F5);
          border-radius: 10px;
          margin-bottom: 30px;
      }

      .profesional_background_container h1 {
          margin: 0;
          font-size: 36px;
          color: #1769d2;
      }

      .profesional_background_container h3 {
          margin: 10px 0 0;
          font-weight: normal;
          color: #2A2A2A;
      }

      .profesional_background_info-list {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .profesional_background_info-list li {
          margin-bottom: 10px;
          padding-bottom: 8px;
          border-bottom: 1px solid #EEE;
      }

      .profesional_background_accent {
          color: #6A4FBF;
          font-weight: bold;
      }

      .profesional_background_section .edu-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 25px;
      }

      .profesional_background_section .edu-item img {
          width: 60px;        /* adjust size as needed */
          height: auto;
          margin-right: 15px;
          border-radius: 6px; /* optional, looks nice */
      }

      .profesional_background_section .edu-details h3 {
          margin: 0;
          padding: 0;
      }

      .profesional_background_section .edu-details p {
          margin: 4px 0;
          line-height: 1.2;
      }


      .profesional_background_table_responsive {
        overflow-x: visible;
      }      

      ul {
          list-style-type: disc; 
      }

      ul li::marker {
          color: #C9A7F5;
          font-size: 1.2em; 
      }   
      
      hr {
          border: none;
          border-top: 3px solid #C9A7F5;
      }      

      .info-list {
        list-style: disc;
        padding: 0;
        margin-left: 50px;
      }

      .book-list {
        list-style: disc;
        padding: 0;
        margin: 0;
      }

      .book-item a {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        text-decoration: none;
        color: #1769d2;
      }

      .book-header,
        .book-item {
          display: flex;
          flex-wrap: nowrap;
          gap: 10px;
          padding: 8px 0;
          text-align: left;
        }
        
        .book-header {
          font-weight: bold;
          padding-bottom: 8px;
          margin-bottom: 8px;
        }

        .dot {
          color: var(--color-purple);   
          width: 20px;      
          font-size: 20px;
          line-height: 1;

        }  

        .col-left,
        .col-title-left {
          width: 40%;
        }

        .col-middle,
        .col-title-middle {
          width: 45%;
        }

        .col-right,
        .col-title-right {
          width: 15%;
        }

        .col-title-left,
        .col-title-middle,
        .col-title-right {
          text-align: center;
          color: #1769d2;
          border-bottom: 1px solid #dadada;
          padding-bottom:5px;
          margin-left: 30px;
          margin-right: 30px;       
        }

        .col-left,
        .col-middle,
        .col-right {
          text-align: left;
          color: #000000;
        }

      .col-left {
        position: relative;
      }

      /*.col-left::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 25%;
        height: 1px;
        background: #E5E8EA;
      }*/


      .ph-project-history-table {
        border-collapse: collapse;
        width: 100%;
        table-layout: fixed;       
      }

      .ph-project-history-table th {
        background-color: #1F4E78;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        padding: 8px 10px;
        border: 1px solid #ffffff;
        font-size: 15px;
      }

      .ph-project-history-table td {
        padding: 8px 10px;
        border: 1px solid #ffffff;
        font-size: 14px;
        vertical-align: top;
        line-height: 1.35;
      }

      .ph-project-history-table tr:nth-child(odd) td {
        background-color: #BDD7EE;
      }
      .ph-project-history-table tr:nth-child(even) td {
        background-color: #ffffff;
      }

      .ph-project-history-table .ph-center {
        text-align: center;
      }

      .ph-project-history-table .ph-nowrap-list p {
        margin: 0 0 4px 0;
      }

      .ph-project-history-table .ph-nowrap-list p:last-child {
        margin-bottom: 0;
      }

      .ph-project-history-table col.ph-industry      { width: 12%; }
      .ph-project-history-table col.ph-description   { width: 20%; }
      .ph-project-history-table col.ph-highlights    { width: 38%; }
      .ph-project-history-table col.ph-role          { width: 8%; }
      .ph-project-history-table col.ph-tech          { width: 22%; }

   /* ============================================
   1250px
   ============================================ */
      @media (max-width: 1250px) {

        :root {
            --resolution-label: "Resolution: 1250px";
        }

        .navbar-expand-lg .navbar-collapse {
              flex-basis: 100%;
          }
          .navbar-expand-lg .navbar-toggler {
              display: block;
          }
          .navbar-expand-lg .navbar-collapse.collapse {
              display: none !important;
          }
          .navbar-expand-lg .navbar-collapse.show {
              display: block !important;
          }
      }


    /*1024px*/
      @media (max-width: 1024px) {

        :root {
            --resolution-label: "Resolution: 1024px";
        }

        .container {
          padding: 0 24px;
        }

        .css-post-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
        }

        .css-footer-grid {
          grid-template-columns: 1fr 1fr;
          gap: 32px;
        }

        .css-footer-logo {
          grid-column: 1 / -1;
        }

        .nav__list {
          gap: 2px;
        }

        .nav__list a {
          padding: 6px 8px;
          font-size: 12px;
        }
      }

 
   /*768px
   --------------------------------*/
     @media (max-width: 768px) {

      :root {
          --resolution-label: "Resolution: 768px";
      }

      .roll-again-badge {
          width: auto; 
          height: 50px; 
          display: block;
      }

      .container {
        padding: 0 16px;
      }

      .nav-toggle {
        display: flex;
      }

      .nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        background: var(--color-white);
        border-bottom: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
        justify-content: stretch;
      }

      .nav--open {
        max-height: 400px;
        overflow-y: auto;
      }

      .nav__list {
        flex-direction: column;
        align-items: stretch;
        padding: 12px 16px 20px;
        gap: 2px;
      }

      .nav__list a {
        padding: 10px 14px;
        font-size: 14px;
        white-space: normal;
      }

      .hero {
        padding: 20px 0 0;
      }

      .hero__banner {
        padding: 32px 24px;
        gap: 16px;
        border-radius: var(--radius-lg);
      }

      .hero__icon {
        width: 48px;
        height: 48px;
      }

      .hero__icon svg {
        width: 24px;
        height: 24px;
      }

      .css-post-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .css-post-footer {
        display: flex;
        gap: 12px;
        margin-top: auto;
      }

      .css-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
      }

      .css-footer-logo {
        align-items: center;
      }

      .css-footer-desc {
        max-width: none;
      }

      /* --- merged post adjustments --- */

      body {
        padding-top: var(--mobile-header-height, 100px);
      }

      .css-post-image-wrap {
        height: var(--css-post-image-height-tablet, 180px);
      }

      .css-post-image--portrait {
        max-width: 85%;
      }

      .css-post-text {
        height: var(--css-post-text-tablet, 150px);
      }
    }

    @media (max-width: 605px) {
        .post {
            width: 95%;
        }
    }    


  @media (max-width: 480px) {
    :root {
        --resolution-label: "Resolution: 480px";
    }


    .profesional_background_table_responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      display: block;
    }

    .ph-project-history-table {
      width: max-content;   /* allows natural width */
      table-layout: auto;   /* allows columns to expand */
      white-space: nowrap;  /* prevents cell wrapping */
    }

    .logo__text {
      font-size: 13px;
    }

    .logo__icon {
      width: 28px;
      height: 28px;
    }

    .tags {
      gap: 8px;
    }

    .tag {
      font-size: 12px;
      padding: 7px 12px;
    }

    /* --- merged post adjustments --- */

    body {
      padding-top: var(--mobile-header-height, 100px);
    }

    .css-post-text {
      height: var(--css-post-text-mobile, 175px);
    }

    .css-post-text-popup {
        width: 90vw;
        max-width: 90vw;   /* ← this is the important part */
    }

    .css-post-image-popup {
        width: 75vw;
        max-width: 75vw;   /* ← this is the important part */
    }



    .roll-again-badge {
        width: 50px; 
        height: auto; 
    }


    .book-header,
    .book-item {
      flex-wrap: wrap;
      gap: 8px;
    }

    .col-left,
    .col-middle,
    .col-right {
      width: 100%;
      text-align: left;
    }

    .col-title-left,
    .col-title-middle,
    .col-title-right {
      width: 100%;
      margin: 0;
      padding-bottom: 6px;
      text-align: left;
    }

    .book-item a {
      display: block;
      margin-bottom: 6px;
    }    
  }

  @media (max-width: 430px) {
        :root {
            --post-max-width: 375px;
            --post-title-font-size: 14px;
            --resolution-label: "Resolution: 430px";
        }

        .css-post-text-popup {
            width: 90vw;
            max-width: 90vw;   /* ← this is the important part */
        }

        .css-post-image-popup {
            width: 85vw;
            max-width: 85vw;   /* ← this is the important part */
        }

      .roll-again-badge {
          width: 50px; 
          height: auto; 
      }
    }