:root {
      --bg: #070707;
      --bg-spot: rgba(0,130,255,0.05);
      --bg-grid: rgba(255,255,255,0.0.03);
      --card-bg: rgba(17, 19, 22, 0.5);
      --card-border: rgba(241, 237, 237, 0.317);
      --card-radius: 8px;
      --third-primary: #fff;
      --secondary: #a0a7b1;
      --accent: #12B0E8;
      --accent-hover: #2ec4ff;
      --live-bg: #151b23;
      --live-border: #12B0E8;
      --live-text: #12B0E8;
      --space: 2rem;
      --max-width: 1200px;
      --grid-gap: 2rem;
      --grid-gap-small: 1.7rem;
      --card-img-ratio: 2 / 1.2;
      font-family: 'Inter', Arial, sans-serif;
    }

   .page-portfolio html, body {
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }
    /* body {
      background:
        radial-gradient(circle at 52% 20%, var(--bg-spot) 0%, transparent 60%),
        repeating-linear-gradient(0deg, transparent, transparent 31px, var(--bg-grid) 32px),
        repeating-linear-gradient(90deg, transparent, transparent 31px, var(--bg-grid) 32px),
        var(--bg);
      background-attachment: fixed;
      color: var(--primary);
      min-height: 100vh;
      font-family: 'Inter', Arial, sans-serif;
    } */
    * { box-sizing: border-box; }

   .page-portfolio main {
      max-width: var(--max-width);
      margin-top: .1em;
      margin-bottom: 0em;
      margin-left: auto;
      margin-right: auto;
      /* padding: calc(var(--space) * 1.3) var(--space) var(--space) var(--space); */
      position: relative;
      z-index: 1;
    }

    .page-portfolio h3 {
      font-size: clamp(2rem, 4vw, 2rem);
      font-weight: 700;
      margin: 0 0 0 0;
      color: var(--third-primary);
      letter-spacing: -0.012em;
    }
    .page-portfolio .taglinePortfolio {
      color: var(--secondary);
      font-size: 1.08rem;
      font-weight: 400;
      /* max-width: auto; */
      line-height: 1.6;
      margin: 0em 0em .1em 0em;
    }

 .page-portfolio .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--grid-gap);
      margin-top: 8px;
    }



    @media (max-width: 1050px) {
      .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (max-width: 700px) {
      main { padding: 1.1rem 0.75rem 2.3rem 0.75rem;}
      .portfolio-grid { grid-template-columns: 1fr; gap: 1.2rem;}
    }

.page-portfolio    article.site-card {
      /* background: var(--card-bg); */
      border: 1px solid var(--card-border);
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: 0 2px 20px 0 rgba(0,0,0,0.13);
      display: flex;
      flex-direction: column;
      transition: border 0.16s, box-shadow 0.19s, transform 0.18s;
      position: relative;
    }
.page-portfolio    article.site-card:hover {
      border: 1px solid var(--accent);
      box-shadow: 0 8px 30px 0 rgba(18,176,232,0.11), 0 2px 20px 0 rgba(0,0,0,0.15);
      transform: translateY(-2px) scale(1.012);
    }
.page-portfolio    .site-card-thumb {
      /* width: 33%; */
      aspect-ratio: var(--card-img-ratio);
      background: #181b20;
      display: block;
      object-fit: cover;
    }
  .page-portfolio  .site-card-body {
      display: flex;
      flex-direction: column;
      padding: 1.09rem 1.25rem 1.1rem 1.19rem;
      flex: 1 1 0px;
      position: relative;
      gap: 0.5rem;
      background-color: var(--card-bg);
    }
.page-portfolio    .site-card-toprow {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 0.3em;
    }
 .page-portfolio   .site-card-year {
      color: var(--secondary);
      font-size: 0.98rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      opacity: 0.93;
    }
 .page-portfolio   .site-card-type {
      background: rgba(160,167,177,0.07);
      color: var(--secondary);
      font-size: 0.78rem;
      font-weight: 600;
      border-radius: 999px;
      padding: 0.22em 0.8em 0.17em 0.82em;
      margin-left: 0.44em;
      text-transform: capitalize;
      letter-spacing: 0.01em;
    }
 .page-portfolio   .site-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      line-height: 1.19;
      margin: 3px 0 0px 0;
      color: var(--primary);
      letter-spacing: -0.015em;
    }
 .page-portfolio   .site-card-title .subtext {
      font-size: 1.09rem;
      color: var(--secondary);
      font-weight: 500;
    }
 .page-portfolio   .site-card-desc {
      color: var(--secondary);
      font-size: 1rem;
      font-weight: 400;
      line-height: 1.52;
      margin: 0.23em 0 0.1em 0;
      min-height: 2.7em;
      max-width: 92%;
    }

 .page-portfolio   .site-card-footer {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 0.55rem;
      margin-top: 1.05em;
    }
 .page-portfolio   .live-link {
      display: inline-flex;
      align-items: center;
      padding: 0.36em 1em 0.36em 0.85em;
      border-radius: 2em;
      font-size: 0.97rem;
      font-weight: 500;
      background: var(--live-bg);
      color: var(--live-text);
      border: 1px solid var(--live-border);
      text-decoration: none;
      transition: background 0.15s,border 0.13s, color 0.15s;
    }
 .page-portfolio   .live-link:hover {
      background: #162934;
      color: var(--accent-hover);
      border: 1px solid var(--accent-hover);
    }
 .page-portfolio   .live-link .dot {
      width: 7px;
      height: 7px;
      background: var(--accent);
      border-radius: 50%;
      margin-right: 7px;
      display: inline-block;
      margin-bottom: 1px;
      box-shadow: 0 0 6px 0 #12B0E885;
    }
 .page-portfolio   .site-card-footer .divider {
      width: 1px;
      height: 16px;
      background: rgba(160,167,177,0.10);
      margin: 0 0.5em;
      border-radius: 1px;
      display: inline-block;
    }
 .page-portfolio   .site-card-footer .soon {
      color: var(--secondary);
      font-size: 0.97rem;
      letter-spacing: 0.01em;
      font-weight: 500;
      padding: 0.15em 0.6em 0.15em 0.6em;
      opacity: 0.68;
    }

    @media (max-width: 600px) {
      .site-card-body { padding: 0.95rem 0.9rem 0.97rem 0.93rem; }
      .portfolio-grid { gap: 0.75rem; }
      .site-card-title { font-size: 1.07rem; }
    }
    @media (max-width:420px) {
      h1 { font-size: 1.38rem; }
      .portfolio-grid { gap: 0.38rem;}
      .site-card-desc { font-size: 0.93rem;}
    }

.page-portfolio  .paging {
            font-size: .9em;
            display: flex;
            justify-content: right;
            /* align-items: right; */
            margin-top: .3em;
            /* gap: .1em; */
        }
.page-portfolio  .paging-stats {
            font-size: .9em;
            font-weight: 500;
            display: flex;
            justify-content: left;
            margin-top: 1.2em;
            color: var(--accent-hover);
            margin-bottom: .3em;
        }
  .page-portfolio  .paging .pagingon {
            font-size: 1.2em; /* or 14px, etc. - usually slightly larger or bold */
            font-weight: bold;
   } /* other styles */

  .page-portfolio  .paging a {
            color: var(--text-secondary);
            text-decoration: none;
            font-weight: 500;
            /* transition: color 0.3s ease; */
            text-decoration: none;
        }
        
 .page-portfolio  .paging a:hover, a.active  {
            color: var(--color-mint);
            text-decoration: underline;
          
        }