/* work.html: the builds. Column composition: an index rail on wide screens, one frame per build down the middle. */
.w-hero h1{max-width:13ch}
.w-hero .lede{margin-top:28px}
.w-layout{display:grid; grid-template-columns:200px minmax(0,1fr); gap:0 64px; align-items:start}
.w-rail{position:sticky; top:104px; padding-top:clamp(52px,8vw,104px)}
.w-rail ol{list-style:none; margin:0; padding:0}
.w-rail li + li{margin-top:4px}
.w-rail a{display:grid; grid-template-columns:34px 1fr; align-items:baseline; gap:8px; padding:7px 0; text-decoration:none; color:var(--ink-muted); font-size:15px; line-height:1.25; transition:color .3s}
.w-rail a:hover,.w-rail a.on{color:var(--ink)}
.w-rail a.on{font-weight:500}
.w-rail a span{font-weight:200; font-size:22px; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.w-rail .eb-pen{font-size:30px; margin:0 0 14px}
@media (max-width:1100px){ .w-layout{grid-template-columns:minmax(0,1fr)} .w-rail{display:none} }

.w-list .section{padding-inline:0}
.build{display:grid; grid-template-columns:minmax(0,1fr) clamp(220px,24vw,300px); gap:26px 52px; align-items:end; scroll-margin-top:96px}
.build .meta .thin-num{font-size:clamp(64px,7vw,104px); display:inline-block}
.build .meta h2{margin-top:14px}
.build .meta .kind{margin:0 0 6px; font-size:30px}
.build .eb-placard{margin-top:16px; font-size:19px}
.build .eb-placard .k{font-size:15px}
.build.flip{grid-template-columns:clamp(220px,24vw,300px) minmax(0,1fr)}
.build.flip .clipframe,.build.flip .shotframe{order:2}
@media (max-width:860px){
  .build,.build.flip{grid-template-columns:minmax(0,1fr)}
  .build.flip .clipframe,.build.flip .shotframe{order:0}
  .build .meta{order:-1}
}

/* a clip inside a glass frame */
.clipframe{padding:clamp(10px,1.4vw,16px); border-radius:24px}
.clipframe .screen{position:relative; border-radius:13px; overflow:hidden; background:#05080B}
.clipframe video{width:100%; height:auto; display:block; cursor:pointer}
.clipframe .state{position:absolute; right:12px; bottom:12px; z-index:4; 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:7px 11px; box-shadow:3px 3px 0 #0A0F14; cursor:pointer}
.clipframe .state svg{width:11px; height:11px; fill:currentColor}
.clipframe .state .pl{display:none}
.clipframe.paused .state .pl{display:inline} .clipframe.paused .state .pa{display:none}

/* the two builds with no clip */
.noclip{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:52px}
.noclip .eb-print{padding-top:30px}
.noclip .eb-print .thin-num{font-size:clamp(56px,5vw,80px); display:block; color:var(--paper-ink)}
.noclip h3{margin-top:14px; font-size:clamp(22px,2.2vw,28px); font-weight:500; letter-spacing:-.025em}
.noclip .blank{margin-top:22px; 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}
.noclip .ph{font-weight:500; color:var(--paper-ink)}
@media (max-width:860px){ .noclip{grid-template-columns:minmax(0,1fr); gap:39px} }

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

/* generated builds (builds_site.py): a screenshot frame for builds without a clip, and the Play and video links */
.shotframe{padding:clamp(10px,1.4vw,16px); border-radius:24px}
.shotframe .screen{position:relative; border-radius:13px; overflow:hidden; background:#05080B; aspect-ratio:16/9}
.shotframe .screen a,.shotframe .screen img{display:block; width:100%; height:100%}
.shotframe .screen img{object-fit:cover}
.build .w-acts{margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; font-size:15px}
.noclip .w-acts{margin-top:16px; display:flex; flex-wrap:wrap; gap:10px 16px; font-size:15px}
.build .bl-sample{display:inline-block; margin-top:8px; 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-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}