/* ===== PROJECTS PAGE ===== */

.projects-page .site-shell{
  background:
    radial-gradient(circle at 3% 2%,rgba(233,111,19,.11),transparent 25%),
    radial-gradient(circle at 96% 22%,rgba(255,155,66,.04),transparent 25%),
    linear-gradient(180deg,#08090a 0%,#0b0c0e 52%,#08090a 100%);
}

.projects-hero{
  position:relative;
  overflow:hidden;
  padding:72px 0 62px;
  border-bottom:1px solid #26211e;
  background:
    linear-gradient(90deg,rgba(233,111,19,.075),transparent 36%),
    repeating-linear-gradient(135deg,transparent 0 33px,rgba(255,255,255,.008) 33px 34px);
}

.projects-hero:after{
  content:"";
  position:absolute;
  right:-130px;
  top:-180px;
  width:520px;
  height:520px;
  border:1px solid rgba(233,111,19,.08);
  border-radius:50%;
  box-shadow:
    0 0 0 70px rgba(233,111,19,.018),
    0 0 0 140px rgba(233,111,19,.01);
  pointer-events:none;
}

.projects-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:64px;
  align-items:end;
}

.projects-hero-copy h1{
  margin:.7rem 0 .9rem;
  max-width:760px;
  font-size:clamp(3.4rem,7vw,6.8rem);
  line-height:.86;
  letter-spacing:-.065em;
  text-transform:uppercase;
  text-shadow:0 12px 36px rgba(0,0,0,.42);
}

.projects-hero-copy h1 span{
  color:#ff7a1a;
}

.projects-lead{
  max-width:700px;
  margin:0;
  color:#afb3b8;
  font-size:clamp(1rem,1.6vw,1.18rem);
  line-height:1.65;
}

.projects-hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}

.projects-hero-tags span{
  padding:8px 11px;
  border:1px solid #3b332e;
  border-radius:7px;
  background:#111315;
  color:#a7abb0;
  font-size:.66rem;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.project-index{
  overflow:hidden;
  border:1px solid #403126;
  border-radius:17px;
  background:
    linear-gradient(145deg,rgba(233,111,19,.075),transparent 38%),
    #111315;
  box-shadow:0 24px 55px rgba(0,0,0,.34);
}

.project-index-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:19px 20px;
  border-bottom:1px solid #332c28;
}

.project-index-label{
  display:block;
  color:#ff8b32;
  font-size:.61rem;
  font-weight:950;
  letter-spacing:.16em;
}

.project-index-top strong{
  display:block;
  margin-top:3px;
  font-size:1.25rem;
}

.project-count{
  min-width:66px;
  padding-left:16px;
  border-left:1px solid #3b3029;
  text-align:right;
}

.project-count span{
  display:block;
  color:#737980;
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.15em;
}

.project-count b{
  display:block;
  color:#ff8b32;
  font-size:1.4rem;
  line-height:1.05;
}

.project-index-row{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:16px 20px;
  border-bottom:1px solid #292724;
  color:inherit;
  text-decoration:none;
  transition:.16s ease;
}

.project-index-row:hover{
  background:rgba(233,111,19,.07);
}

.project-index-num{
  color:#ff8b32;
  font-size:.69rem;
  font-weight:950;
  letter-spacing:.1em;
}

.project-index-name strong{
  display:block;
  color:#f4f4f4;
  font-size:.92rem;
}

.project-index-name small{
  display:block;
  margin-top:3px;
  color:#777d84;
  font-size:.7rem;
}

.project-index-arrow{
  color:#ff8b32;
  font-size:1.2rem;
}

.project-index-note{
  margin:0;
  padding:15px 20px 17px;
  color:#70767d;
  font-size:.72rem;
  line-height:1.5;
}

.projects-section{
  padding:68px 0 76px;
}

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

.projects-section-head h2{
  margin:.25rem 0 0;
  font-size:clamp(2.4rem,4.2vw,4rem);
  letter-spacing:-.045em;
}

.projects-section-head>p{
  max-width:470px;
  margin:0 0 6px;
  color:#8d9298;
  line-height:1.55;
  text-align:right;
}

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

.project-showcase{
  position:relative;
  overflow:hidden;
  min-height:505px;
  display:flex;
  flex-direction:column;
  border:1px solid #35302c;
  border-top:3px solid #e96f13;
  border-radius:18px;
  background:
    linear-gradient(160deg,rgba(233,111,19,.075),transparent 34%),
    linear-gradient(180deg,#181a1d,#101214);
  color:inherit;
  text-decoration:none;
  box-shadow:0 22px 50px rgba(0,0,0,.23);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.project-showcase:before{
  content:"";
  position:absolute;
  right:-50px;
  top:-70px;
  width:220px;
  height:220px;
  border:1px solid rgba(233,111,19,.09);
  transform:rotate(45deg);
  pointer-events:none;
}

.project-showcase:hover{
  transform:translateY(-4px);
  border-color:#744326;
  box-shadow:0 30px 70px rgba(0,0,0,.38),0 0 0 1px rgba(233,111,19,.09);
}

.project-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:24px 24px 0;
}

.project-card-mark{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border:1px solid #604027;
  border-radius:15px;
  background:
    linear-gradient(145deg,#2c211a,#111315);
  color:#ff8b32;
  font-size:1.12rem;
  font-weight:1000;
  letter-spacing:-.03em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018);
}

.project-card-status{
  padding-top:4px;
  text-align:right;
}

.project-card-status span{
  display:block;
  color:#ff8b32;
  font-size:.58rem;
  font-weight:950;
  letter-spacing:.14em;
}

.project-card-status b{
  display:block;
  margin-top:5px;
  color:#8d9399;
  font-size:.72rem;
}

.project-card-body{
  padding:35px 24px 26px;
}

.project-card-number{
  color:#686e75;
  font-size:.62rem;
  font-weight:950;
  letter-spacing:.14em;
}

.project-card-body h3{
  margin:.55rem 0 .65rem;
  font-size:clamp(1.8rem,3vw,2.55rem);
  line-height:1.02;
  letter-spacing:-.04em;
}

.project-card-body p{
  max-width:580px;
  margin:0;
  color:#a1a6ac;
  line-height:1.62;
}

.project-feature-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:23px;
}

.project-feature-tags span{
  padding:7px 9px;
  border:1px solid #393431;
  border-radius:6px;
  background:#0d0f11;
  color:#969ba1;
  font-size:.63rem;
  font-weight:850;
}

.project-card-footer{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-top:auto;
  padding:18px 24px 21px;
  border-top:1px solid #2d2926;
  background:rgba(7,8,9,.34);
}

.project-card-footer>span{
  color:#969ba0;
  font-size:.75rem;
}

.project-card-footer small{
  display:block;
  margin-bottom:3px;
  color:#62686e;
  font-size:.54rem;
  font-weight:950;
  letter-spacing:.14em;
}

.project-card-footer strong{
  color:#ff8b32;
  font-size:.78rem;
  white-space:nowrap;
}

.project-card-footer strong b{
  margin-left:4px;
  font-size:1rem;
}

.ilm-project{
  background:
    linear-gradient(160deg,rgba(233,111,19,.045),transparent 36%),
    linear-gradient(180deg,#17191c,#0e1012);
}

@media(max-width:980px){
  .projects-hero-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .project-index{
    max-width:720px;
  }

}

@media(max-width:760px){
  .projects-hero{
    padding:50px 0 44px;
  }

  .projects-hero-copy h1{
    font-size:clamp(3rem,15vw,5rem);
  }

  .projects-section{
    padding:52px 0 60px;
  }

  .projects-section-head{
    display:block;
  }

  .projects-section-head>p{
    margin-top:10px;
    text-align:left;
  }

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

}

@media(max-width:500px){
  .projects-hero-grid{
    gap:26px;
  }

  .project-index-top,
  .project-index-row,
  .project-index-note{
    padding-left:15px;
    padding-right:15px;
  }

  .project-card-top,
  .project-card-body,
  .project-card-footer{
    padding-left:18px;
    padding-right:18px;
  }

  .project-card-footer{
    display:block;
  }

  .project-card-footer strong{
    display:block;
    margin-top:12px;
  }

}




/* Project-specific surface variation. */
.rogue-project{
  background:
    linear-gradient(160deg,rgba(233,111,19,.06),transparent 36%),
    linear-gradient(180deg,#19191b,#101214);
}

.hardcore-project{
  min-height:505px;
}

/* ===== PROJECTS / TOOLS ===== */
.projects-tools-section{
  padding:12px 0 78px;
}
.tools-section-head{
  padding-top:56px;
  border-top:1px solid #2a2521;
}
.project-tools-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
}
.project-tool-card{
  min-height:350px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #34302c;
  border-top:3px solid #e96f13;
  border-radius:17px;
  background:
    linear-gradient(155deg,rgba(233,111,19,.07),transparent 38%),
    linear-gradient(180deg,#181a1d,#101214);
  color:inherit;
  text-decoration:none;
  transition:.17s ease;
  box-shadow:0 18px 44px rgba(0,0,0,.18);
}
.project-tool-card:hover{
  transform:translateY(-3px);
  border-color:#724326;
  box-shadow:0 27px 60px rgba(0,0,0,.32);
}
.project-tool-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:21px 21px 0;
}
.project-tool-mark{
  width:61px;height:61px;
  display:grid;place-items:center;
  border:1px solid #5d3d27;
  border-radius:13px;
  background:linear-gradient(145deg,#2a201a,#111315);
  color:#ff8b32;
  font-weight:1000;
}
.project-tool-badges{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end}
.project-tool-badges span{
  padding:5px 7px;
  border:1px solid #3c3530;
  border-radius:999px;
  background:#0c0e10;
  color:#8e949a;
  font-size:.53rem;
  font-weight:950;
  letter-spacing:.1em;
}
.project-tool-body{padding:27px 21px 21px}
.project-tool-body h3{margin:.45rem 0 .55rem;font-size:clamp(1.7rem,3vw,2.25rem);letter-spacing:-.04em}
.project-tool-body p{margin:0;color:#9aa0a6;line-height:1.6}
.project-tool-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:auto;
  padding:15px 21px;
  border-top:1px solid #2d2926;
  color:#ff8b32;
  font-size:.75rem;
  font-weight:900;
}
.project-tool-footer b{font-size:1.1rem}
.tools-home-card{border-top-color:#555a60;background:linear-gradient(180deg,#17191c,#101214)}
.tools-home-card .project-tool-mark{border-color:#3b3f44;color:#888e95;background:#151719}
@media(max-width:760px){
  .project-tools-grid{grid-template-columns:1fr}
  .tools-section-head{padding-top:42px}
}
/* Expanded browser-tools library */
.project-tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.project-tool-card{min-height:330px}.project-tool-body p{font-size:.83rem}@media(max-width:1050px){.project-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:760px){.project-tools-grid{grid-template-columns:1fr}}

/* 0.9.43 — projects content first */
.projects-page .projects-hero{padding:28px 0 23px!important}
.projects-page .projects-hero-grid{grid-template-columns:1fr!important;gap:0!important;align-items:start!important}
.projects-page .projects-hero .breadcrumb{display:none!important}
.projects-page .projects-hero-copy h1{margin:.25rem 0 .5rem!important;font-size:clamp(2.7rem,5.8vw,4.9rem)!important;line-height:.9!important}
.projects-page .projects-lead{font-size:1rem!important;line-height:1.5!important}
.projects-page .projects-hero-tags{margin-top:14px!important}
.projects-page .project-index{display:none!important}
@media(max-width:680px){.projects-page .projects-hero{padding:20px 0 17px!important}.projects-page .projects-hero-copy h1{font-size:clamp(2.3rem,13vw,3.6rem)!important}}
