/* builds.html: the builds library. Every build at once, grouped; a tap opens the demo clip in the shared
   sealed-note layer (site.js), and the tile slots back when it closes. */
.bl-hero h1{max-width:13ch}
.bl-hero .lede{margin-top:28px}
.bl-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px 26px; flex-wrap:wrap; margin-bottom:clamp(22px,3vw,34px)}
.bl-head > .muted{font-size:15px}
.bl-head .note{max-width:none}
.bl-grid{display:grid; gap:clamp(22px,2.6vw,34px)}
.bl-games,.bl-more{grid-template-columns:repeat(2,minmax(0,1fr))}
.bl-apps{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){ .bl-apps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .bl-games,.bl-apps,.bl-more{grid-template-columns:minmax(0,1fr)} }

.bl-tile{display:flex; flex-direction:column; padding:clamp(10px,1.2vw,14px) clamp(10px,1.2vw,14px) clamp(18px,2vw,24px); border-radius:24px; scroll-margin-top:96px}
/* the demo button is a .sealed note (so site.js opens it), restyled as a screen */
.bl-tile .bl-demo{aspect-ratio:16/9; width:100%; padding:0; border:0; border-radius:13px; overflow:hidden; background:#05080B; display:block}
.bl-tile .bl-demo img{width:100%; height:100%; object-fit:cover; transition:transform .6s var(--settle)}
.bl-tile .bl-demo:hover{transform:none; box-shadow:none}
.bl-tile .bl-demo:hover img{transform:scale(1.03)}
.bl-tile .bl-demo:focus-visible{outline:3px solid var(--pen); outline-offset:3px}
.bl-play{position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:8px; font:500 13px/1 var(--font-machine); color:#0A0F14; background:#fff; border:2px solid #0A0F14; border-radius:10px; padding:8px 12px; box-shadow:3px 3px 0 #0A0F14}
.bl-play svg{width:10px; height:10px; fill:currentColor}
.bl-meta{display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:end; padding:18px clamp(8px,1vw,12px) 0}
.bl-meta .thin-num{font-size:clamp(52px,4.6vw,72px)}
.bl-meta .kind{margin:0; font-size:26px; line-height:1}
.bl-meta h3{margin-top:4px; font-size:clamp(20px,1.8vw,24px)}
.bl-meta .muted{margin-top:4px; font-size:16px}
.bl-try{margin-top:16px; padding:14px clamp(8px,1vw,12px) 0; border-top:1.5px dashed var(--dash); font-size:15px}
.bl-try .k{color:var(--ink-muted)} .bl-try .k::after{content:":"}
.ph{font-weight:500}

.bl-print{padding-top:30px}
.bl-print .thin-num{font-size:clamp(52px,4.6vw,72px); display:block; color:var(--paper-ink)}
.bl-print h3{margin-top:12px; font-size:clamp(20px,1.8vw,24px)}
.bl-print .sub{margin-top:6px; font-size:16px; color:var(--paper-ink-muted)}
.bl-print .blank{margin-top:20px; aspect-ratio:16/9; border:1.5px dashed var(--paper-rule); border-radius:4px; display:grid; place-items:center; text-align:center; padding:16px; color:var(--paper-ink-muted); font-size:15px}
.bl-print .ph{color:var(--paper-ink)}
.bl-print .bl-try{border-top-color:var(--paper-rule); padding-inline:0}
.bl-print .bl-try .k{color:var(--paper-ink-muted)}

.bl-end{display:flex; align-items:center; flex-wrap:wrap; gap:26px clamp(52px,8vw,120px)}
.bl-end .note{max-width:15ch}

/* generated cards (builds_site.py): a screenshot that opens the build, the Play button, the video link, the date */
.bl-tile .bl-shot{position:relative; aspect-ratio:16/9; width:100%; border-radius:13px; overflow:hidden; background:#05080B; display:block}
.bl-tile .bl-shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--settle)}
.bl-tile a.bl-shot:hover img{transform:scale(1.03)}
.bl-model{margin-top:2px; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-muted)}
.bl-credit{margin-top:4px; font-size:14px; color:var(--ink-muted)}
.bl-print .bl-credit{color:var(--paper-ink-muted)}
.bl-sample{display:inline-block; margin-top:6px; font:500 12px/1 var(--font-machine); text-transform:uppercase; letter-spacing:.06em; padding:5px 8px; border:1.5px dashed currentColor; border-radius:6px; color:var(--ink-muted)}
.bl-try{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px}
.bl-try .bl-date{margin-left:auto; color:var(--ink-muted); font-size:14px; font-variant-numeric:tabular-nums}
.bl-go{display:inline-flex; align-items:center; gap:8px; font:500 13px/1 var(--font-machine); color:#0A0F14; background:#fff; border:2px solid #0A0F14; border-radius:10px; padding:8px 12px; box-shadow:3px 3px 0 #0A0F14; text-decoration:none; transition:transform .2s, box-shadow .2s}
.bl-go:hover{transform:translate(-1px,-2px); box-shadow:4px 5px 0 #0A0F14}
.bl-go:focus-visible{outline:3px solid var(--pen); outline-offset:3px}
.bl-go svg{width:10px; height:10px; fill:currentColor}
.bl-watch{font-size:15px}