/* Programs: the 13-week block section, locked 4 Oct 2026 as concept 1, Boxes. Home's locked type scale (style.css tokens),
   tokens only, no new hex. Boxes and cells are drawn all round, never a single-sided border. */

/* the head: the heading, the method line under it */
.blk-head{display:grid;gap:24px}  /* the heading on one line, the method line under it */
.blk-title{margin:0;font-size:var(--t-h2);line-height:.98;color:var(--white)}
.blk-line{margin:0;font-size:var(--t-lede);line-height:1.5;color:var(--grey);max-width:820px}
.blk-stage{margin-top:72px}
.lede + .blk{padding-top:0}  /* the intro's own space below is the gap */
/* The head was centred and went back to the left the same afternoon (Macca, 4 Oct: "show me moving it
   back to the left") */

/* the phase words under every concept */
.blk-detail{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:88px;min-height:210px}
.blk-fx{transition:opacity .18s ease}
.is-out .blk-fx{opacity:0}
.blk-dh .k{margin:0}
.blk-dn{margin:12px 0 0;font-size:var(--t-h3);line-height:.95;color:var(--white)}
.blk-dt{margin:0;font-size:var(--t-body);line-height:1.55;color:var(--grey);max-width:640px}
.blk-base{margin:22px 0 0;padding:16px 18px;border:1px solid var(--line2);border-radius:4px;font-size:16px;line-height:1.5;color:var(--grey);max-width:640px}
.blk-base .k{display:block;margin-bottom:8px}

/* play, pause, again, and where we are */
.blk-ctl{display:flex;align-items:center;gap:14px;margin-top:28px}
.blk-play{cursor:pointer;background:none}
.blk-play svg{width:12px;height:12px}
.blk-play:hover{background:var(--white);border-color:var(--white);color:var(--midblack)}
.blk-count{color:var(--grey)}

/* ================= the boxes ================= */
.c1-row{display:flex;gap:28px;align-items:flex-start}
.c1-g{flex:var(--n) 1 0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:0;background:none;border:0;color:inherit;text-align:left;cursor:pointer}
.c1-boxes{display:flex;gap:8px;width:100%}
.c1-b{position:relative;flex:1;height:96px;border:1px solid var(--line);border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;padding:10px;transition:background-color .35s ease,border-color .35s ease,color .35s ease;color:var(--dim)}
.c1-b .mono{font-size:13px}
.c1-b i{font-style:normal;font-size:11px;color:var(--beige);line-height:1.1}
.c1-b.is-past{background:var(--panel2);border-color:var(--line);color:var(--grey)}
.c1-b.is-now{background:var(--white);border-color:var(--white);color:var(--midblack)}
.c1-b.is-now i{color:var(--midblack)}
.c1-n{margin-top:18px;font-size:22px;line-height:1;color:var(--dim);transition:color .3s ease}
.c1-w{margin-top:8px;color:var(--dim)}
.c1-g.is-on .c1-n{color:var(--white)}
.c1-g.is-on .c1-w{color:var(--beige)}
.c1-g:hover .c1-n{color:var(--white)}
.c1-detail{margin-top:72px}

/* ================= laptop, tablet, phone ================= */
@media (min-width:900px) and (max-height:820px){
  .blk-stage{margin-top:56px}
}
@media (max-width:1180px){
  .c1-row{gap:18px}
  .c1-boxes{gap:6px}
  .c1-b{height:80px}
}
@media (max-width:1024px){
  .blk-head,.blk-detail{grid-template-columns:1fr;gap:24px}
}
@media (max-width:720px){
  .blk-stage{margin-top:44px}
  .blk-detail{min-height:0}
  .blk-ctl{margin-top:20px}
  /* the thirteen boxes become one strip; the names go under as small labels */
  .c1-row{gap:8px}
  .c1-boxes{gap:3px}
  .c1-b{padding:4px;border-radius:4px;height:40px}
  .c1-b .mono{font-size:9px}
  .c1-b i{display:none}
  .c1-n{font-size:11px;margin-top:10px}
  .c1-w{display:none}
  .c1-detail{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){ .c1-b,.blk-fx{transition:none} }