html{scroll-snap-type:y mandatory}body.projects-v17{margin:0;background:#090909;color:#f1efe8;overflow-x:hidden}.pj-screen{position:relative;width:100%;height:100dvh;min-height:100dvh;max-height:100dvh;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;padding:calc(var(--header-h) + 13px) var(--pad) 16px}.pj-code{position:relative;z-index:5;display:flex;justify-content:space-between;font:500 6px var(--mono);letter-spacing:.12em;color:#b72424}.pj-code span{color:rgba(127,127,127,.6)}
.pj-hero{background:radial-gradient(circle at 73% 26%,rgba(183,36,36,.18),transparent 24%),#090909}.pj-hero-copy{position:absolute;left:var(--pad);top:19%;width:48%}.pj-hero-copy small{font:500 6px var(--mono);color:#b72424}.pj-hero-copy h1{font:800 clamp(70px,9.7vw,158px)/.71 var(--sans);letter-spacing:-.095em;margin:10px 0 16px;color:#f1efe8;max-width:8ch}.pj-hero-copy h1 em{font-family:var(--serif);font-weight:400;color:#b72424}.pj-hero-copy p{font:400 11px/1.45 var(--sans);color:rgba(255,255,255,.44)}.pj-index{position:absolute;right:var(--pad);top:16%;width:43%;height:70%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,1fr);gap:5px}.pj-index a{position:relative;padding:11px;display:flex;flex-direction:column;justify-content:flex-end;border:1px solid rgba(255,255,255,.14);color:#fff;text-decoration:none;background:#111;transition:.3s}.pj-index a:hover{background:#f1efe8;color:#090909;transform:translateY(-3px)}.pj-index b{position:absolute;left:10px;top:8px;font:500 5px var(--mono);color:#b72424}.pj-index strong{font:700 clamp(14px,1.4vw,22px)/.95 var(--sans);letter-spacing:-.04em}.pj-index span{margin-top:4px;font:500 5px var(--mono);color:#777}
.pj-category.is-light{background:#e8e2d9;color:#090909}.pj-category.is-dark{background:#090909;color:#f1efe8}.pj-side{position:absolute;left:var(--pad);top:20%;width:24%}.pj-side small{font:500 5px var(--mono);color:#b72424}.pj-side h2{font:700 clamp(39px,4.4vw,68px)/.86 var(--sans);letter-spacing:-.07em;margin:9px 0 18px;max-width:8ch}.pj-side h2 em{display:block;margin-top:11px;font-family:var(--serif);font-weight:400;font-size:.5em;line-height:1.05;letter-spacing:-.02em}.pj-side>a{font:600 5px var(--mono);color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}.pj-cards{position:absolute;right:var(--pad);top:17%;width:70%;height:70%;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.pj-cards .p-card{position:relative;min-height:0;height:100%;display:grid;grid-template-rows:55% 45%;color:#090909;text-decoration:none;border:1px solid rgba(9,9,9,.14);background:#f1efe8;overflow:hidden;transition:.35s}.is-dark .pj-cards .p-card{background:#111;color:#f1efe8;border-color:rgba(255,255,255,.14)}.pj-cards .p-card figure{margin:0;overflow:hidden}.pj-cards .p-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(.65);transition:.5s}.pj-cards .p-card:hover{transform:translateY(-6px)}.pj-cards .p-card:hover img{filter:grayscale(0);transform:scale(1.035)}.pj-cards .p-card-meta{padding:9px;overflow:hidden}.pj-cards .p-card-meta>span{font:500 4px var(--mono);color:#b72424}.pj-cards .p-card-meta>strong{display:block;font:700 15px/1 var(--sans);letter-spacing:-.04em;margin:6px 0}.pj-cards .p-card-meta p{font:400 6.5px/1.35 var(--sans);color:#746e67;margin:0 0 6px}.is-dark .pj-cards .p-card-meta p{color:rgba(255,255,255,.42)}.pj-cards .p-card-meta div{display:flex;gap:3px;flex-wrap:wrap}.pj-cards .p-card-meta b{font:500 3.7px var(--mono);padding:3px 4px;border:1px solid rgba(127,127,127,.25)}.pj-cards .p-card>i{position:absolute;right:8px;top:7px;color:#b72424;font-style:normal}
@media(min-width:1001px) and (max-height:820px){.pj-screen{padding-top:calc(var(--header-h) + 7px)}.pj-hero-copy{top:15%}.pj-hero-copy h1{font-size:clamp(58px,8vw,112px)}.pj-index{top:14%;height:72%}.pj-side{top:16%}.pj-side h2{font-size:clamp(33px,3.7vw,52px)}.pj-cards{top:14%;height:73%}.pj-cards .p-card-meta>strong{font-size:12px}.pj-cards .p-card-meta p{font-size:5.8px}}
@media(max-width:1000px){.pj-screen{padding:76px 14px 10px}.pj-code{font-size:4px}.pj-hero-copy{left:14px;right:14px;top:11%;width:auto}.pj-hero-copy h1{font-size:17vw;line-height:.78}.pj-index{left:14px;right:14px;top:49%;width:auto;height:44%;gap:3px}.pj-index strong{font-size:4.8vw}.pj-side{left:14px;right:14px;top:11%;width:auto}.pj-side h2{font-size:10vw;line-height:.93;max-width:10ch}.pj-cards{left:14px;right:14px;top:37%;width:auto;height:56%;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:4px}.pj-cards .p-card{grid-template-rows:48% 52%}.pj-cards .p-card-meta{padding:5px}.pj-cards .p-card-meta>strong{font-size:9px;margin:3px 0}.pj-cards .p-card-meta p,.pj-cards .p-card-meta div{display:none}}


/* =========================================================
   V18 / PROJECT CATEGORY COLUMN SAFETY
========================================================= */
@media(min-width:1001px){
  .pj-category .pj-side{
    left:var(--pad)!important;
    top:21%!important;
    width:22.5%!important;
    min-width:0!important;
    overflow:visible!important;
  }
  .pj-category .pj-side h2{
    width:100%!important;
    max-width:7.15ch!important;
    font-size:clamp(34px,3.52vw,55px)!important;
    line-height:.91!important;
    letter-spacing:-.062em!important;
    margin:9px 0 18px!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
  .pj-category .pj-side h2 em{
    display:block!important;
    max-width:10.5ch!important;
    margin-top:13px!important;
    font-size:.49em!important;
    line-height:1.08!important;
    letter-spacing:-.025em!important;
  }
  .pj-category .pj-cards{
    left:29%!important;
    right:var(--pad)!important;
    width:auto!important;
    top:17%!important;
    height:70%!important;
  }
}
@media(min-width:1001px) and (max-width:1250px){
  .pj-category .pj-side h2{
    font-size:clamp(31px,3.35vw,46px)!important;
    max-width:7ch!important;
  }
  .pj-category .pj-cards{left:30%!important}
}
@media(min-width:1001px) and (max-height:820px){
  .pj-category .pj-side{top:17%!important}
  .pj-category .pj-side h2{
    font-size:clamp(29px,3.15vw,44px)!important;
    line-height:.94!important;
  }
  .pj-category .pj-cards{top:14%!important;height:73%!important}
}
@media(max-width:1000px){
  .pj-category .pj-side{
    left:14px!important;right:14px!important;top:11%!important;width:auto!important;
  }
  .pj-category .pj-side h2{
    max-width:9.5ch!important;
    font-size:clamp(31px,9.1vw,45px)!important;
    line-height:.95!important;
  }
  .pj-category .pj-cards{
    left:14px!important;right:14px!important;top:38%!important;width:auto!important;
  }
}