/* Approved Selected Experience + SJUT editorial layout. All selectors stay in scope. */
#projects{padding:22px 20px 0;scroll-margin-top:77px}
#projects .sectionhead{display:grid;grid-template-columns:minmax(0,37fr) minmax(0,63fr);align-items:center;gap:32px;margin:0 48px 26px;min-height:118px}
#projects .sectionhead .kicker{margin-bottom:6px;color:var(--green);font-size:12px;letter-spacing:2.3px}
#projects .kicker:before,#sjut-documentation .kicker:before{display:none}
#projects h2{font-size:clamp(34px,3.25vw,58px);font-weight:750;letter-spacing:-2px;line-height:.98;color:#0b121c}
#projects h2>span{display:block}
#projects .sectionhead>p{max-width:560px;border-left:1px solid #b9b9c8;padding:4px 0 4px 42px;font-size:16px;line-height:1.65;color:#74768b}
#projects .projectgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
#projects .project-card{position:relative;grid-row:auto;height:clamp(210px,14.6vw,280px);min-width:0;overflow:hidden;border-radius:4px;background:var(--deep);align-self:stretch}
#projects .project-card[hidden]{display:none}
#projects .project-img,#projects .project-card:first-child .project-img{position:absolute;inset:0;height:100%;width:100%}
#projects .project-img img,#projects .project-img.plan img{width:100%;height:100%;object-fit:cover;object-position:center;padding:0;margin:0;translate:none}
#projects .project-desc{position:absolute;inset:auto 0 0;min-height:64px;padding:11px 62px 11px 54px;background:rgba(0,51,49,.91);color:white}
#projects .project-desc>small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#projects .project-title{margin:0 0 3px;display:block}
#projects .project-title h3{font-size:18px;font-weight:700;line-height:1.15;letter-spacing:-.4px;color:#fff}
#projects .project-desc p{font-size:13px;line-height:1.3;color:#fff}
#projects .project-number{position:absolute;left:18px;top:20px;color:#d0f231;font-size:15px;font-weight:700;line-height:1}
#projects .project-title>.arrow{position:absolute;right:20px;top:50%;margin-top:-16px;display:grid;place-items:center;width:32px;height:32px;border:1px solid #fff;border-radius:50%;font-size:0;transform:none}
#projects .project-title>.arrow:before{content:"→";font-size:23px;line-height:1}
#projects .view-circle{display:none}
#projects .project-trigger{border-radius:4px}
#projects .project-card:focus-within{outline:3px solid #8bbd24;outline-offset:4px}
#sjut-documentation{display:grid;grid-template-columns:minmax(0,25fr) minmax(0,74fr);gap:12px;padding:24px 20px 14px;align-items:stretch;scroll-margin-top:90px}
#sjut-documentation .sjut-doc-copy{min-width:0;padding:8px 0 12px 48px;display:flex;flex-direction:column;align-items:flex-start}
#sjut-documentation .kicker{font-size:12px;letter-spacing:1.6px;margin-bottom:6px;color:var(--green)}
#sjut-documentation h2{font-size:clamp(35px,3.05vw,56px);font-weight:750;line-height:1;letter-spacing:-1.9px;color:#0b121c;margin:0 0 24px;max-width:335px}
#sjut-documentation h2:after{content:"";display:block;width:40px;height:2px;background:var(--green);margin-top:24px}
#sjut-documentation .sjut-doc-copy p{font-size:15px;line-height:1.65;color:#74768b;max-width:305px;margin-bottom:10px}
#sjut-documentation .sjut-doc-grid{display:grid;grid-template-columns:minmax(0,27fr) minmax(0,23fr) minmax(0,24fr);grid-template-rows:minmax(0,8fr) minmax(0,5fr);gap:10px 12px;height:clamp(540px,39vw,610px);min-width:0}
#sjut-documentation .sjut-photo{position:relative;display:flex;flex-direction:column;width:100%;min-width:0;min-height:0;padding:0;text-align:left;background:var(--deep);color:#fff;border-radius:4px;overflow:hidden}
#sjut-documentation .sjut-photo-manhole{grid-column:1;grid-row:1 / 3}
#sjut-documentation .sjut-photo-utility-cable{grid-column:2;grid-row:1 / 3}
#sjut-documentation .sjut-photo-field-team{grid-column:3;grid-row:1}
#sjut-documentation .sjut-photo-program-collab{grid-column:3;grid-row:2}
#sjut-documentation .sjut-photo picture{display:block;flex:1;min-height:0;width:100%;overflow:hidden}
#sjut-documentation .sjut-photo img{height:100%;width:100%;object-fit:cover;object-position:center;transition:filter 220ms ease}
/* Full portraits retain the burned-in overlay; captions occupy their own row. */
#sjut-documentation .sjut-photo-utility-cable img{object-fit:contain;object-position:center top}
#sjut-documentation .sjut-photo-utility-cable picture{background:#263a32}
/* Preserve all five helmets and the complete collaboration banner/logo. */
#sjut-documentation .sjut-photo-field-team img,#sjut-documentation .sjut-photo-program-collab img{object-fit:contain;object-position:center top}
#sjut-documentation .sjut-photo-field-team picture{background:#153c35}
#sjut-documentation .sjut-photo-program-collab picture{background:#602e25}
#sjut-documentation .sjut-photo:focus-visible{outline:3px solid #8bbd24;outline-offset:4px}
#sjut-documentation .sjut-caption{position:relative;display:grid;gap:3px;flex-shrink:0;min-height:58px;padding:9px 14px 9px 54px;background:#003a38ed;color:white}
#sjut-documentation .sjut-caption small{position:absolute;left:17px;top:18px;color:#d0f231;font-size:16px;font-weight:700;line-height:1}
#sjut-documentation .sjut-caption strong{font-size:13px;line-height:1.2;font-weight:700;letter-spacing:-.4px}
#sjut-documentation .sjut-caption>span{font-size:12px;line-height:1.3;color:#f1f5f3}
.sjut-gallery{width:min(1100px,94vw);max-width:94vw;max-height:94dvh;padding:24px;background:var(--deep);color:white;border:1px solid #ffffff30;border-radius:4px;overflow:auto}.sjut-gallery::backdrop{background:#031d17e8}.sjut-gallery-head,.sjut-gallery-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}.sjut-gallery button{background:transparent;color:white;padding:12px;font-size:13px}.sjut-gallery-head .kicker{font-size:10px;letter-spacing:1.5px}.sjut-gallery-head .kicker:before{display:none}#sjutGalleryCounter{color:var(--lime);font-size:12px;margin:8px 0}.sjut-slide{margin:0}.sjut-slide[hidden]{display:none}.sjut-slide picture{display:block}.sjut-slide img{width:100%;height:min(62dvh,720px);object-fit:contain}.sjut-slide figcaption{font-size:20px;line-height:1.4;margin:16px 0}.sjut-slide figcaption p{font-size:12px;color:#d5e0d7;margin-top:6px}.sjut-gallery-nav{border-top:1px solid #ffffff30}

@media(hover:hover){#sjut-documentation .sjut-photo:hover img{filter:brightness(1.04)}}
@media(min-width:1101px){
 html[lang="id"] #projects h2{font-size:clamp(32px,2.7vw,50px)}
 html[lang="id"] #sjut-documentation h2{font-size:clamp(32px,2.8vw,50px)}
 html[lang="id"] #sjut-documentation .sjut-doc-copy p{font-size:14px}
}
@media(min-width:769px) and (max-width:1100px){
 #projects .sectionhead{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;margin-inline:12px}
 #projects .sectionhead>p{padding-left:22px;font-size:14px}
 #projects .projectgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #projects .project-card{height:240px}
 #projects .project-card:last-child{grid-column:1/-1}
 #sjut-documentation{grid-template-columns:1fr;gap:24px}
 #sjut-documentation .sjut-doc-copy{display:block;padding:8px 12px;max-width:720px}
 #sjut-documentation h2{max-width:none}
 #sjut-documentation .sjut-doc-copy p{max-width:640px;margin-bottom:18px}
 #sjut-documentation .sjut-doc-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:500px auto;height:auto;align-items:start}
 #sjut-documentation .sjut-photo-manhole{grid-column:1;grid-row:1}
 #sjut-documentation .sjut-photo-utility-cable{grid-column:2;grid-row:1}
 #sjut-documentation .sjut-photo-field-team{grid-column:1;grid-row:2}
 #sjut-documentation .sjut-photo-program-collab{grid-column:2;grid-row:2}
 #sjut-documentation .sjut-photo-manhole,#sjut-documentation .sjut-photo-utility-cable{height:100%}
 #sjut-documentation .sjut-photo-field-team picture,#sjut-documentation .sjut-photo-program-collab picture{flex:none}
 #sjut-documentation .sjut-photo-field-team img,#sjut-documentation .sjut-photo-program-collab img{height:auto}
}
@media(max-width:768px){
 #projects{padding:32px 20px 0}
 #projects .sectionhead{display:flex;flex-direction:column;align-items:stretch;margin:0 0 22px;gap:18px}
 #projects h2{font-size:clamp(29px,8.4vw,48px);letter-spacing:-1.3px;line-height:1.03}
 #projects .sectionhead>p{padding:0 0 0 16px;font-size:14px;max-width:none}
 #projects .projectgrid{grid-template-columns:minmax(0,1fr);gap:16px}
 #projects .project-card{height:245px}
 #projects .project-desc{padding-right:53px}
 #projects .project-desc p{font-size:12px}
 #projects .project-title>.arrow{right:14px}
 #sjut-documentation{grid-template-columns:minmax(0,1fr);padding:30px 20px 24px;gap:24px}
 #sjut-documentation .sjut-doc-copy{padding:0}
 #sjut-documentation h2{font-size:clamp(38px,10vw,50px);max-width:335px;margin-bottom:20px}
 #sjut-documentation h2:after{margin-top:20px}
 #sjut-documentation .sjut-doc-copy p{font-size:15px;max-width:none;margin-bottom:18px}
 #sjut-documentation .sjut-doc-grid{display:flex;flex-direction:column;gap:16px;height:auto}
 #sjut-documentation .sjut-photo picture{flex:none}
 #sjut-documentation .sjut-photo img{height:auto;object-fit:contain}
 #sjut-documentation .sjut-caption{padding:12px 14px 12px 48px}
 #sjut-documentation .sjut-caption strong{font-size:14px}
}
@media(max-width:767px){
 .sjut-gallery{padding:14px}.sjut-gallery-head{align-items:start}.sjut-gallery-head .kicker{max-width:55%;line-height:1.5}.sjut-gallery-head button{max-width:45%;text-align:right}.sjut-slide img{height:56dvh}.sjut-gallery button{padding:10px 3px}
}
@media(prefers-reduced-motion:reduce){#sjut-documentation .sjut-photo img{transition:none}#sjut-documentation .sjut-photo:hover img{transform:none}}

/* BEGIN MIKO_SJUT_IMAGE_CROP_V4_20261027
   Owner-approved image-fit refinement, photos remain factual and unaltered.
   Gallery ratio follows four ORIGINAL image ratios; no empty side gutters.
   Only the SJUT documentation cards are changed, no project-modal edits. */
@media (min-width: 1281px) {
  #sjut-documentation .sjut-doc-grid {
    /* 01 Manhole / 02 Utility Cable / stacked 03+04.
       Proper column widths allow near-original aspect ratios in every tile. */
    grid-template-columns: minmax(0,31fr) minmax(0,35fr) minmax(0,34fr) !important;
    height: auto !important;
    aspect-ratio: 2 / 1 !important;
    min-height: 520px !important;
    max-height: 730px !important;
    align-items: stretch;
  }
    #sjut-documentation .sjut-doc-grid { grid-template-rows: minmax(0,60fr) minmax(0,40fr) !important; }
  /* Image frame itself fills card; no contain letterboxing. */
  #sjut-documentation .sjut-photo-utility-cable picture,
  #sjut-documentation .sjut-photo-field-team picture,
  #sjut-documentation .sjut-photo-program-collab picture {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: block !important;
  }
  #sjut-documentation .sjut-photo-utility-cable img,
  #sjut-documentation .sjut-photo-field-team img,
  #sjut-documentation .sjut-photo-program-collab img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
    transform: none !important;
  }
  /* 02: near-exact 3:4 photo viewport; fill avoids clipping GPS overlay. */
  #sjut-documentation .sjut-photo-utility-cable img {
    object-fit: fill !important;
    object-position: center top !important;
  }
  /* 03: full team group with safe central positioning. */
  #sjut-documentation .sjut-photo-field-team img {
    object-position: center center !important;
  }
  /* 04: keep the full upper backdrop and MIKO logo in frame. */
  #sjut-documentation .sjut-photo-program-collab img {
    object-position: center top !important;
  }
  #sjut-documentation .sjut-photo-utility-cable:hover img,
  #sjut-documentation .sjut-photo-field-team:hover img,
  #sjut-documentation .sjut-photo-program-collab:hover img {
    transform: none !important;
  }
}
/* END MIKO_SJUT_IMAGE_CROP_V4_20261027 */