/* Hill project galleries: one full-screen vertical bento gallery per department (Abdi 2026-10-24).
   Layout, type, colours and copy follow the approved mockup (/mockups/bento/), without the category tabs: each chapter's
   "Full reel" opens only its own department. A tile opens the project's book directly. Logos are the flat official files, no wash or shadow. */
.hill-gallery{position:absolute;inset:0;z-index:55;display:flex;flex-direction:column;background:#141318;color:#fff;font-family:inherit}
.hill-gallery *{box-sizing:border-box}
.hg-mast{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 4vw;border-bottom:1px solid #34323B}
.hg-lockup{display:flex;align-items:center;gap:14px;font:10px 'Source Code Pro',monospace;letter-spacing:.2em;color:#A7A2B3}
.hg-lockup img{display:block;width:136px;height:auto}
.hg-lockup i{display:block;width:1px;height:22px;background:#4A4752}
.hg-close{display:grid;place-items:center;flex:none;width:48px;height:48px;border:1px solid #696671;background:none;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.hg-close:hover{border-color:#B9B9F9;color:#B9B9F9}
.hg-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:38px 0 calc(40px + env(safe-area-inset-bottom,0px))}
.hg-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:0 4vw;margin-bottom:34px}
.hg-eyebrow{margin:0 0 14px;font:10px 'Source Code Pro',monospace;letter-spacing:.24em;color:#B9B9F9}
.hg-title{margin:0;font-size:clamp(44px,6.6vw,88px);font-weight:400;letter-spacing:-.04em;line-height:1}
.hg-title span{color:#B9B9F9}
.hg-intro{margin:16px 0 0;font-size:17px;color:#B8B3C2}
.hg-help{flex:none;text-align:right;font-size:13px;color:#B8B3C2}
.hg-help span{font:10px 'Source Code Pro',monospace;letter-spacing:.15em;color:#B9B9F9}
.hg-help p{margin:12px 0 0;line-height:1.5}
.hg-bento{display:grid;grid-template-columns:1.35fr 1fr 1fr;grid-auto-rows:210px;grid-auto-flow:row dense;gap:16px;padding:0 4vw}
.hg-tile{position:relative;display:block;min-width:0;padding:0;border:0;border-radius:3px;overflow:hidden;background:#2B2831;color:#fff;text-align:left;cursor:pointer;touch-action:pan-y}
/* the flat Hill logo sits in each picture's top-left corner: anchor the crop there so it is never cut off or dimmed */
.hg-tile>img{display:block;width:100%;height:100%;object-fit:cover;object-position:0 0;transform-origin:0 0;pointer-events:none;user-select:none;transition:transform .5s}
.hg-tile:hover>img{transform:scale(1.025)}
.hg-tile:focus-visible{outline:2px solid #B9B9F9;outline-offset:5px}
.hg-shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,#141318b8 100%)}
.hg-cap{position:absolute;inset:auto 20px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.hg-cap small{display:block;margin-bottom:8px;font:9px 'Source Code Pro',monospace;letter-spacing:.16em;text-transform:uppercase;color:#DDD9E8}
.hg-cap strong{display:block;font-size:clamp(21px,2.4vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.05;overflow-wrap:anywhere}
.hg-arrow{position:relative;flex:none;width:36px;height:36px;border:1px solid #ffffff66;border-radius:50%}
.hg-arrow::before{content:"";position:absolute;right:11px;top:11px;width:9px;height:9px;border-top:1.5px solid #fff;border-right:1.5px solid #fff}
.hg-arrow::after{content:"";position:absolute;left:17px;top:10px;width:1.5px;height:16px;background:#fff;transform:rotate(45deg)}
.hg-tile:hover .hg-arrow{background:#533AFD;border-color:#533AFD}
.hg-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:28px 4vw 0;padding-top:18px;border-top:1px solid #34323B;font:9px 'Source Code Pro',monospace;letter-spacing:.12em;text-transform:uppercase;color:#A7A2B3}
@media(min-width:901px){
.hg-tile:nth-child(4n+1){grid-column:1;grid-row:span 2}
.hg-tile:nth-child(4n+2),.hg-tile:nth-child(4n+3){grid-column:2}
.hg-tile:nth-child(4n+4){grid-column:3;grid-row:span 2}
.hg-tile:nth-child(4n+2) .hg-cap strong,.hg-tile:nth-child(4n+3) .hg-cap strong{font-size:24px}
/* a last block that is not full: its tiles grow into the empty cells, so no gallery ends on a hole */
.hg-tile:last-child:nth-child(4n+1){grid-column:1/-1}
.hg-tile:last-child:nth-child(4n+2){grid-column:2/-1;grid-row:span 2}
.hg-tile:last-child:nth-child(4n+3),.hg-tile:nth-last-child(2):nth-child(4n+2){grid-column:2/-1}
}
@media(max-width:900px){
.hg-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:230px}
.hg-tile:nth-child(4n+1),.hg-tile:nth-child(4n+4){grid-row:span 2}
}
@media(max-width:650px){
.hg-mast{padding:16px 20px}
.hg-lockup{gap:10px;font-size:9px}
.hg-lockup img{width:110px}
.hg-close{width:44px;height:44px}
.hg-scroll{padding-top:28px}
.hg-heading{padding:0 20px;gap:14px;margin-bottom:26px}
.hg-intro{font-size:14px}
.hg-help{max-width:125px;font-size:11px}
.hg-bento{grid-template-columns:1fr;grid-auto-rows:260px;gap:14px;padding:0 20px}
.hg-tile:nth-child(n){grid-column:1;grid-row:auto}
.hg-cap{inset:auto 16px 16px}
.hg-cap strong{font-size:25px}
.hg-foot{margin:22px 20px 0;font-size:8px}
}
/* the lockup in the book's header sits beside its close button */
.hg-viewer-end{display:flex;align-items:center;gap:22px}
.hg-lockup--viewer img{width:112px}
@media(max-width:560px){.hg-lockup--viewer{display:none}}
@media(prefers-reduced-motion:reduce){.hg-tile>img{transition:none}.hg-tile:hover>img{transform:none}}