/*
 * Evan Vander Stoep — Shared V2 Site Stylesheet
 * Used by evan.kj7bre.com and the Textpattern project journal.
 * Generated from the existing Projects page stylesheet, with
 * Textpattern blog styles appended.
 */

:root{
      --bg:#020503;
      --bg2:#050a06;
      --panel:#08120c;
      --panel2:#0c1811;
      --line:rgba(57,255,20,.28);
      --line-strong:rgba(57,255,20,.38);
      --text:#eafff0;
      --muted:#a7ffbf;
      --green:#39ff14;
      --green2:#7dff6b;
      --green3:#19c90a;
      --shadow:0 0 28px rgba(57,255,20,.18);
      --radius:18px;
      --max:1240px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}

    body{
      margin:0;
      font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at top right, rgba(57,255,20,.12), transparent 28%),
        radial-gradient(circle at top left, rgba(57,255,20,.08), transparent 22%),
        linear-gradient(180deg, #020503 0%, #000000 100%);
      line-height:1.6;
    }

    body.modal-open{
      overflow:hidden;
    }

    a{
      color:var(--green2);
      text-decoration:none;
    }

    a:hover{
      color:#fff;
    }

    button{
      font:inherit;
    }

    .grid-overlay{
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(57,255,20,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(57,255,20,.05) 1px, transparent 1px);
      background-size:40px 40px;
      mask-image:linear-gradient(to bottom, rgba(255,255,255,.55), transparent);
      z-index:0;
    }

    .wrap{
      width:min(calc(100% - 32px), var(--max));
      margin:0 auto;
      position:relative;
      z-index:1;
    }

    header{
      position:sticky;
      top:0;
      z-index:30;
      backdrop-filter:blur(12px);
      background:rgba(0,8,2,.78);
      border-bottom:1px solid var(--line);
      box-shadow:0 0 18px rgba(57,255,20,.08);
    }

    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      min-height:76px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      font-weight:800;
      letter-spacing:.04em;
      color:#fff;
      text-shadow:0 0 10px rgba(57,255,20,.25);
    }

    .brand-mark{
      width:42px;
      height:42px;
      border-radius:12px;
      border:1px solid rgba(57,255,20,.45);
      background:
        linear-gradient(135deg, rgba(57,255,20,.20), rgba(57,255,20,.04)),
        #08100a;
      display:grid;
      place-items:center;
      box-shadow:0 0 16px rgba(57,255,20,.15);
      font-size:14px;
      color:var(--green);
      text-shadow:0 0 10px rgba(57,255,20,.35);
      flex-shrink:0;
    }

    .nav-links{
      display:flex;
      flex-wrap:wrap;
      gap:18px;
      align-items:center;
    }

    .nav-links a{
      color:var(--muted);
      font-size:.95rem;
    }

    .nav-links a:hover,
    .nav-links a.active{
      color:#fff;
      text-shadow:0 0 10px rgba(57,255,20,.35);
    }

    .hero{
      padding:72px 0 30px;
    }

    .hero-panel{
      background:linear-gradient(180deg, rgba(8,18,12,.92), rgba(3,10,5,.96));
      border:1px solid var(--line);
      border-radius:24px;
      box-shadow:var(--shadow);
      padding:34px;
      overflow:hidden;
      position:relative;
    }

    .hero-panel::after{
      content:"";
      position:absolute;
      right:-60px;
      top:-60px;
      width:220px;
      height:220px;
      background:radial-gradient(circle, rgba(57,255,20,.18), transparent 70%);
      filter:blur(18px);
      pointer-events:none;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:10px;
      font-size:.82rem;
      text-transform:uppercase;
      letter-spacing:.14em;
      color:var(--green2);
      margin-bottom:14px;
      text-shadow:0 0 10px rgba(57,255,20,.25);
    }

    .eyebrow::before{
      content:"";
      width:10px;
      height:10px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 18px var(--green);
    }

    h1{
      margin:0 0 14px;
      font-size:clamp(2.5rem, 5vw, 4.8rem);
      line-height:1;
      letter-spacing:-.04em;
      text-shadow:0 0 16px rgba(57,255,20,.12);
    }

    .hero-panel p{
      margin:0;
      max-width:72ch;
      color:var(--muted);
      font-size:1.05rem;
    }

    .section{
      padding:24px 0 60px;
    }

    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:20px;
      margin-bottom:24px;
    }

    .section-head h2{
      margin:0 0 8px;
      font-size:clamp(1.8rem, 3vw, 2.8rem);
      letter-spacing:-.03em;
      text-shadow:0 0 12px rgba(57,255,20,.10);
    }

    .section-head p{
      margin:0;
      color:var(--muted);
      max-width:70ch;
    }

    .project-grid{
      display:grid;
      grid-template-columns:repeat(5, 1fr);
      gap:18px;
    }

    .project-card{
      position:relative;
      display:block;
      width:100%;
      min-height:260px;
      border-radius:20px;
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      background:
        linear-gradient(180deg, rgba(57,255,20,.04), rgba(0,0,0,.22)),
        #020603;
      transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
      isolation:isolate;
      cursor:pointer;
      padding:0;
    }

    .project-card:hover{
      transform:translateY(-4px);
      border-color:var(--line-strong);
      box-shadow:0 0 24px rgba(57,255,20,.22), 0 16px 34px rgba(57,255,20,.12);
    }

    .project-thumb{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center;
      transform:scale(1);
      transition:transform .35s ease, opacity .35s ease, filter .35s ease;
      filter:saturate(.95) brightness(.9);
    }

    .project-card:hover .project-thumb{
      transform:scale(1.05);
      filter:saturate(1.05) brightness(.75);
    }

    .project-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.18) 68%, rgba(0,0,0,.08) 100%);
      z-index:1;
      pointer-events:none;
    }

    .project-top{
      position:absolute;
      top:14px;
      left:14px;
      right:14px;
      z-index:3;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:10px;
      pointer-events:none;
    }

    .project-tag,
    .project-num{
      display:inline-flex;
      align-items:center;
      min-height:30px;
      border-radius:999px;
      border:1px solid rgba(57,255,20,.20);
      background:rgba(0,8,2,.72);
      backdrop-filter:blur(8px);
      padding:6px 11px;
      font-size:.76rem;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--green2);
      box-shadow:0 0 10px rgba(57,255,20,.08);
    }

    .project-content{
      position:absolute;
      inset:auto 0 0 0;
      padding:18px;
      z-index:2;
      transform:translateY(18px);
      transition:transform .28s ease;
      text-align:left;
      pointer-events:none;
    }

    .project-card:hover .project-content{
      transform:translateY(0);
    }

    .project-content h3{
      margin:0 0 8px;
      color:#fff;
      font-size:1.1rem;
      line-height:1.15;
    }

    .project-content p{
      margin:0;
      color:#d6ffdf;
      font-size:.93rem;
      line-height:1.5;
      opacity:0;
      max-height:0;
      overflow:hidden;
      transition:opacity .28s ease, max-height .28s ease;
    }

    .project-card:hover .project-content p{
      opacity:1;
      max-height:160px;
    }

    .footer-cta{
      margin:0 0 64px;
      padding:28px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      text-align:center;
      gap:16px;
      background:linear-gradient(180deg, rgba(8,18,12,.92), rgba(3,10,5,.96));
      border:1px solid var(--line);
      border-radius:22px;
      box-shadow:var(--shadow);
    }

    .footer-cta h2{
      margin:0;
      font-size:clamp(1.6rem, 3vw, 2.4rem);
    }

    .footer-cta p{
      margin:0;
      color:var(--muted);
      max-width:62ch;
    }

    .btn-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      justify-content:center;
      margin-top:6px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      gap:10px;
      border:none;
      border-radius:999px;
      padding:14px 20px;
      font-weight:700;
      transition:.2s ease;
      cursor:pointer;
    }

    .btn-primary{
      background:linear-gradient(135deg, var(--green), var(--green3));
      color:#031002;
      box-shadow:0 0 18px rgba(57,255,20,.35), 0 10px 28px rgba(57,255,20,.18);
    }

    .btn-primary:hover{
      transform:translateY(-1px);
      color:#021008;
      box-shadow:0 0 24px rgba(57,255,20,.45), 0 12px 32px rgba(57,255,20,.22);
    }

    .btn-secondary{
      background:rgba(57,255,20,.04);
      border:1px solid var(--line);
      color:var(--text);
      box-shadow:0 0 12px rgba(57,255,20,.05);
    }

    .btn-secondary:hover{
      background:rgba(57,255,20,.08);
      box-shadow:0 0 14px rgba(57,255,20,.12);
    }

    footer{
      padding:26px 0 50px;
      color:var(--muted);
      border-top:1px solid var(--line);
      box-shadow:0 -8px 20px rgba(57,255,20,.03);
    }

    .footer-row{
      display:flex;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
    }

    .project-modal{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.78);
      backdrop-filter:blur(10px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:24px;
      z-index:1000;
    }

    .project-modal.active{
      display:flex;
    }

    .project-modal-inner{
      width:min(1120px, 100%);
      max-height:calc(100vh - 48px);
      overflow:auto;
      background:linear-gradient(180deg, rgba(8,18,12,.97), rgba(3,10,5,.98));
      border:1px solid var(--line-strong);
      border-radius:24px;
      box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 30px rgba(57,255,20,.16);
      position:relative;
    }

    .project-modal-close{
      position:absolute;
      top:16px;
      right:16px;
      width:48px;
      height:48px;
      border-radius:50%;
      border:1px solid rgba(57,255,20,.22);
      background:rgba(7,17,13,.86);
      color:#fff;
      font-size:1.5rem;
      line-height:1;
      cursor:pointer;
      z-index:3;
    }

    .project-modal-close:hover{
      background:rgba(57,255,20,.08);
      color:var(--green2);
    }

    .project-modal-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      min-height:640px;
    }

    .project-modal-image{
      min-height:640px;
      background:#020603 center/cover no-repeat;
      border-right:1px solid var(--line);
    }

    .project-modal-copy{
      padding:38px;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }

    .project-modal-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-bottom:18px;
    }

    .project-modal-copy h3{
      margin:0 0 14px;
      font-size:clamp(2rem, 4vw, 3rem);
      line-height:1.02;
      letter-spacing:-.03em;
      color:#fff;
    }

    .project-modal-copy p{
      margin:0 0 18px;
      color:var(--muted);
      font-size:1.04rem;
      line-height:1.75;
    }

    .project-modal-note{
      padding:16px 18px;
      border:1px solid rgba(57,255,20,.14);
      border-radius:16px;
      background:rgba(57,255,20,.04);
      color:#d6ffdf;
      font-size:.95rem;
    }

    @media (max-width: 1200px){
      .project-grid{
        grid-template-columns:repeat(4, 1fr);
      }
    }

    @media (max-width: 980px){
      .project-grid{
        grid-template-columns:repeat(3, 1fr);
      }

      .project-modal-grid{
        grid-template-columns:1fr;
      }

      .project-modal-image{
        min-height:340px;
        border-right:none;
        border-bottom:1px solid var(--line);
      }
    }

    @media (max-width: 760px){
      .nav{
        flex-direction:column;
        align-items:flex-start;
        padding:14px 0;
      }

      .nav-links{
        gap:12px;
      }

      .hero{
        padding-top:42px;
      }

      .hero-panel{
        padding:22px;
      }

      .project-grid{
        grid-template-columns:repeat(2, 1fr);
      }

      .project-modal{
        padding:12px;
      }

      .project-modal-copy{
        padding:22px;
      }
    }

    @media (max-width: 520px){
      .project-grid{
        grid-template-columns:1fr;
      }

      .project-card{
        min-height:280px;
      }

      h1{
        font-size:2.35rem;
      }

      .project-modal-image{
        min-height:260px;
      }

      .project-modal-close{
        width:42px;
        height:42px;
        top:12px;
        right:12px;
      }
    }

/* ============================================================
   TEXTPATTERN BLOG
   ============================================================ */

.blog-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px;
}

/* Blog cards */

.blog-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-width:0;
  background:
    linear-gradient(180deg, rgba(8,18,12,.94), rgba(3,10,5,.98));
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.blog-card:hover {
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:
    0 0 24px rgba(57,255,20,.22),
    0 16px 34px rgba(57,255,20,.12);
}

/* Blog card image */

.blog-card-image {
  width:100%;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#020603;
  border-bottom:1px solid var(--line);
}

.blog-card-image a {
  display:block;
  width:100%;
  height:100%;
}

.blog-card-image img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.95) brightness(.9);
  transition:transform .35s ease, filter .35s ease;
}

.blog-card:hover .blog-card-image img {
  transform:scale(1.04);
  filter:saturate(1.05) brightness(.82);
}

/* Blog card copy */

.blog-card-copy {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:22px;
}

.blog-meta {
  margin-bottom:10px;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--green2);
}

.blog-card h2 {
  margin:0 0 12px;
  font-size:1.35rem;
  line-height:1.15;
  letter-spacing:-.02em;
}

.blog-card h2 a {
  color:#fff;
  text-shadow:0 0 10px rgba(57,255,20,.10);
}

.blog-card h2 a:hover {
  color:var(--green2);
}

.blog-excerpt {
  color:var(--muted);
  font-size:.96rem;
  line-height:1.65;
}

.blog-excerpt p {
  margin:0 0 12px;
}

.blog-card-bottom {
  margin-top:auto;
  padding-top:18px;
}

.blog-read-more {
  color:var(--green2);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.03em;
}

/* Pagination */

.blog-pagination {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:34px;
}

/* Individual article */

.blog-article {
  overflow:hidden;
  max-width:1000px;
  margin:0 auto;
  background:
    linear-gradient(180deg, rgba(8,18,12,.94), rgba(3,10,5,.98));
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.blog-article-header {
  padding:42px 42px 30px;
}

.blog-article-header h1 {
  margin:0 0 18px;
  font-size:clamp(2.3rem, 5vw, 4.5rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.blog-article-meta {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  color:var(--muted);
  font-size:.9rem;
}

/* Article hero image */

.blog-article-image {
  width:100%;
  max-height:700px;
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#020603;
}

.blog-article-image img {
  display:block;
  width:100%;
  height:auto;
  max-height:700px;
  object-fit:cover;
}

/* Article body */

.blog-body {
  padding:38px 42px 48px;
  color:var(--text);
  font-size:1.06rem;
  line-height:1.8;
}

.blog-body > *:first-child {
  margin-top:0;
}

.blog-body > *:last-child {
  margin-bottom:0;
}

.blog-body p {
  margin:0 0 1.45em;
}

.blog-body h2,
.blog-body h3,
.blog-body h4 {
  color:#fff;
  line-height:1.2;
  text-shadow:0 0 10px rgba(57,255,20,.10);
}

.blog-body h2 {
  margin:1.8em 0 .65em;
  font-size:2rem;
}

.blog-body h3 {
  margin:1.6em 0 .55em;
  font-size:1.45rem;
}

.blog-body img {
  display:block;
  max-width:100%;
  height:auto;
  margin:28px auto;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 0 18px rgba(57,255,20,.10);
}

.blog-body a {
  color:var(--green2);
  text-decoration:underline;
  text-decoration-color:rgba(125,255,107,.35);
  text-underline-offset:3px;
}

.blog-body code {
  padding:.15em .4em;
  background:rgba(57,255,20,.06);
  border:1px solid rgba(57,255,20,.12);
  border-radius:6px;
  color:var(--green2);
}

.blog-body pre {
  overflow:auto;
  padding:20px;
  background:#010402;
  border:1px solid var(--line);
  border-radius:14px;
  color:#d6ffdf;
}

.blog-body blockquote {
  margin:28px 0;
  padding:16px 20px;
  background:rgba(57,255,20,.04);
  border-left:3px solid var(--green);
  color:var(--muted);
}

/* Article footer */

.blog-article-footer {
  padding:0 42px 42px;
}

/* Blog responsive */

@media (max-width:980px) {
  .blog-grid {
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width:620px) {
  .blog-grid {
    grid-template-columns:1fr;
  }

  .blog-article-header {
    padding:28px 22px 22px;
  }

  .blog-body {
    padding:26px 22px 34px;
  }

  .blog-article-footer {
    padding:0 22px 28px;
  }
}