/* The changelog in the Instrument shell (2026-09-28). Loaded after
   /css/instrument.css by /changelog/ and every release page under it, all
   generated by scripts/changelog-pages.mjs. The shell gives the type, the
   modules, wells, keys and bezels; this file only lays them out.

   Both open with the shell's page head (.phead) and body (.pbody). The index
   is one module per release, newest first, grouped by month: the release's
   display (version, kind, date, the live lamp on the newest), its title,
   summary and key on the left, its poster on the right. A release page puts
   the title beside its display, then the lead, the sections parted by
   engraved grooves with their text beside their pictures, and the
   neighbouring releases at the foot. Type is never bold; the only red is the
   live lamp. */

/* the display: a sunk well that reads the release like the studio's display */
.cl-disp{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;flex-wrap:wrap}
.cl-disp .dm{font-size:22px;line-height:1}
.cl-disp .cl-date,.cl-disp .cl-just{margin-left:auto}
.cl-disp .cl-just{color:#ece7dd}

/* the index */
.cl-log{display:flex;flex-direction:column;gap:var(--s4)}
.cl-month{margin:var(--s4) 0 calc(var(--s2) * -1)}
.cl-month:first-child{margin-top:0}
.cl-card{padding:var(--s5);display:grid;grid-template-columns:416px minmax(0,1fr);gap:var(--s6);align-items:start}
.cl-card .txt{gap:var(--s3)}
.cl-card .fh3 a{color:inherit}
.cl-card .fh3 a:hover{color:#fff}
.cl-card .body{max-width:none}
.cl-card .key{align-self:flex-start}
.cl-poster{display:block;padding:7px}
.cl-poster .bez{display:block;aspect-ratio:3/2;background:#070707}
/* posters come in every shape (a 4:1 strip to a 3:4 phone), so each shows whole on its screen */
.cl-poster img{display:block;width:100%;height:100%;object-fit:contain}
.cl-origin{margin-top:var(--s3);color:#8f8a82}

/* a release page */
.cl-crumbs{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3)}
.cl-lead{max-width:760px}
.cl-when{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.cl-when .print{white-space:normal;line-height:1.5}
.cl-when .key{margin-left:auto}

.cl-sec{position:relative;display:grid;grid-template-columns:416px minmax(0,1fr);gap:var(--s6);align-items:start;margin-top:var(--s6);padding-top:var(--s6)}
.cl-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:1px;background:#080808;box-shadow:0 1px 0 #262626}
.cl-sec.solo{grid-template-columns:minmax(0,1fr)}
.cl-sec.solo .txt{max-width:760px}
.cl-sec .txt{position:sticky;top:var(--s3);gap:var(--s3)}
.cl-sec .body{max-width:none}
.cl-pics{display:flex;flex-direction:column;gap:var(--s5);padding:7px}
.cl-fig{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.cl-fig .bez{display:block}
.cl-fig img{display:block;width:100%;height:auto}
.cl-fig video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.cl-fig figcaption{max-width:none}
.cl-only .cl-fig{max-width:1040px}

.cl-lines{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.cl-lines li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:baseline;font:400 16px/1.55 "Archivo",sans-serif;color:#bdb6aa}
.cl-lines .read{font-size:11px;letter-spacing:.06em;color:#8f8a82}
.cl-good{display:flex;flex-direction:column;gap:8px;font:400 16px/1.55 "Archivo",sans-serif;color:#bdb6aa}

.cl-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s7)}
.cl-next{display:flex;flex-direction:column;gap:12px;padding:var(--s3) var(--s4)}
.cl-next:hover .h3{color:#fff}
.cl-back{margin-top:var(--s4)}

@media (max-width:1439px){
  .cl-card,.cl-sec{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .cl-sec.solo{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1023px){
  .cl-card,.cl-sec{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .cl-sec .txt{position:static}
}
@media (max-width:759px){
  .cl-card{padding:var(--s3)}
  .cl-sec{margin-top:var(--s5);padding-top:var(--s5)}
  .cl-crumbs{margin-bottom:var(--s2)}
  .cl-nav{grid-template-columns:minmax(0,1fr);margin-top:var(--s6)}
  .cl-empty{display:none}
  .cl-next{padding:var(--s3)}
  .cl-disp .dm{font-size:19px}
}