/* table.css: the working page a workshop table fills in.
   Loads after /nav.css and /lhc-core.css, which supply the tokens. */
/* Layout: one column that a table works down, step by step, on a laptop or a phone.
   Colors and type are the Legal Help Commons system, so the tool matches the site. */
:root{
  --indigo:#2c2d72; --indigo-deep:#1e1f52; --indigo-light:#3d3e8a;
  --accent:#F4A06A; --accent-deep:#C2713C; --peach:#F6BE9C;
  --lav:#ECECF7; --lav-soft:#F4F4FB; --periwinkle:#C7C7EC;
  --text:#2a3040; --text-light:#5a6577; --text-muted:#7d8395;
  --border:#ded9e8; --white:#fff; --bg:#fafaf9; --good:#276749;
  --display:'League Spartan',"Segoe UI",system-ui,sans-serif;
  --body:'Source Serif 4',Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);
  font-size:16px;line-height:1.6}
.wrap{max-width:62rem;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:0 3rem}
h1,h2,h3,h4{font-family:var(--display);color:var(--indigo);margin:0;text-wrap:balance}
p{margin:0}
button{font-family:var(--display);cursor:pointer}
:focus-visible{outline:2px solid var(--indigo-light);outline-offset:2px}

/* ---- header ---- */
/* A slim band, so the heading of the phase a group is in is the heading
   they read. The step title below the rail does that work. */
.top{background:var(--indigo);color:var(--white)}
.top-in{max-width:62rem;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:.7rem .6rem}
.eyebrow{font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.top h1{color:var(--white);font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.3;margin:0}
.top p{color:var(--periwinkle);max-width:44rem;margin-top:.7rem;font-size:1rem}

/* ---- progress rail ---- */
.rail{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--lav-soft);
  border-bottom:1px solid var(--border)}
.rail-in{max-width:62rem;margin:0 auto;display:flex;gap:.4rem;overflow-x:auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:.6rem;scrollbar-width:thin}
.rail button{flex:0 0 auto;border:1px solid var(--border);background:var(--white);color:var(--indigo);
  border-radius:999px;padding:.38rem .85rem;font-size:.82rem;font-weight:600;white-space:nowrap}
.rail button[aria-current="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.rail button.done{border-color:var(--accent)}
.rail button.done::before{content:"\2713\00a0";color:var(--accent-deep);font-weight:700}
.rail button[aria-current="true"].done::before{color:var(--peach)}
.rail button:disabled{opacity:.45;cursor:not-allowed}

/* ---- steps ---- */
.step{display:none;padding-top:2rem}
.step.on{display:block}
.step-head{margin-bottom:1.3rem}
.step-head .kicker{font-family:var(--display);font-weight:700;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:.4rem}
.step-head h2{font-size:clamp(1.7rem,3.4vw,2.2rem);font-weight:800;line-height:1.12}
.step-head p{color:var(--text-light);max-width:44rem;margin-top:.5rem}

/* ---- scenario chooser ---- */
.pick{display:grid;gap:1rem;grid-template-columns:1fr;list-style:none;padding:0;margin:0}
.pick-card{display:flex;flex-direction:column;width:100%;text-align:left;background:var(--white);
  border:1px solid var(--border);border-radius:14px;overflow:hidden;padding:0;
  transition:box-shadow .16s,transform .16s,border-color .16s}
.pick-card:hover{box-shadow:0 8px 24px rgba(44,45,114,.12);transform:translateY(-2px)}
.pick-card[aria-pressed="true"]{border-color:var(--indigo);box-shadow:0 0 0 2px var(--indigo)}
.pick-art{background:var(--lav);height:9.5rem;display:flex;align-items:center;justify-content:center;padding:.7rem}
.pick-art img{max-width:100%;max-height:100%;display:block}
.pick-body{padding:.9rem 1rem 1.1rem}
.tag{font-family:var(--display);font-weight:600;font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent-deep);margin-bottom:.3rem}
.pick-body h3{font-size:1.02rem;font-weight:700;line-height:1.25;margin-bottom:.4rem}
.pick-body p{font-size:.9rem;color:var(--text-light);line-height:1.5}
.pick-body .lines{display:block}
.pick-body .lines b{display:block;font-family:var(--display);font-weight:600;font-size:.63rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-top:.5rem}
.pick-body .lines b:first-child{margin-top:0}
.pick-body .lines i{display:block;font-style:normal;font-size:.86rem;line-height:1.48;color:var(--text)}
.pick-body .lines i.life{color:var(--indigo);font-weight:600}
.situation{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.4;
  color:var(--indigo);margin:0 0 .7rem}

/* ---- scenario detail ---- */
.scn{display:grid;gap:1.4rem;grid-template-columns:1fr;align-items:start;margin-bottom:1.6rem}
.scn-art{background:var(--lav);border:1px solid var(--border);border-radius:14px;
  display:flex;align-items:center;justify-content:center;padding:1rem}
.scn-art img{max-width:100%;height:auto;display:block}
.rows dt{font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-top:.9rem}
.rows dd{margin:.15rem 0 0;font-size:.96rem}
.rows dd.life{color:var(--indigo);font-weight:600}
.lede{font-size:1rem}
.lede b{font-family:var(--display);color:var(--indigo)}
details{border:1px solid var(--border);border-radius:12px;background:var(--white);
  padding:.9rem 1.1rem;margin-bottom:1.4rem}
details summary{font-family:var(--display);font-weight:700;color:var(--indigo);cursor:pointer;font-size:.98rem}
details .inner{padding-top:.8rem}
details h4{font-size:1rem;margin:1.1rem 0 .35rem;font-weight:700}
details h4:first-child{margin-top:0}
details p{font-size:.95rem;line-height:1.68}

/* ---- status quo map ---- */
.mapwrap{margin-bottom:1.6rem}
.mapwrap h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.mapline{font-size:.95rem;margin-bottom:.5rem;max-width:44rem}
.mapline b{display:block;font-family:var(--display);font-weight:600;font-size:.68rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.1rem}
.steps-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.45rem}
.sq{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:.5rem .7rem}
.sq.drop{border-style:dashed;border-color:var(--accent);background:#FFF9F4}
.sq .lane{display:block;font-family:var(--display);font-weight:600;font-size:.66rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.2rem}
.sq .txt{font-size:.92rem;line-height:1.3}
.sq .n{font-weight:700;color:var(--indigo)}
.sq.drop .n{color:var(--accent-deep)}
.lane-head,.lane-row{display:none}
.key{font-size:.85rem;color:var(--text-light);display:flex;align-items:center;gap:.45rem;margin-top:.8rem}
.key i{width:1.3rem;height:.85rem;border:1px dashed var(--accent);background:#FFF9F4;border-radius:3px;display:inline-block}
.caption{font-size:.87rem;color:var(--text-light);font-style:italic;margin-top:.8rem;max-width:44rem}

/* ---- card decks ---- */
.deck{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr));
  list-style:none;padding:0;margin:.7rem 0 0}
.chip{width:100%;text-align:left;background:var(--lav-soft);border:1px solid var(--border);
  border-radius:10px;padding:.55rem .7rem;font-family:var(--body);font-size:.88rem;color:var(--text);line-height:1.4}
.chip:hover{border-color:var(--indigo-light)}
.chip[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--white);font-weight:600}
.deck.tech .chip{background:#FFF9F4;border-color:var(--peach)}
.deck.tech .chip[aria-pressed="true"]{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--white)}
.val{width:100%;text-align:left;background:var(--white);border:1px solid var(--border);
  border-radius:12px;padding:.75rem .9rem;font-family:var(--body);color:var(--text);display:block}
.val[aria-pressed="true"]{border-color:var(--indigo);box-shadow:0 0 0 1.5px var(--indigo);background:var(--lav-soft)}
.val b{display:block;font-family:var(--display);font-weight:700;color:var(--indigo);
  font-size:.95rem;margin-bottom:.15rem}
.val span{font-size:.87rem;color:var(--text-light);line-height:1.45}
.val-icon{display:block;width:26px;height:26px;color:var(--accent-deep);margin-bottom:.45rem}
.val[aria-pressed="true"] .val-icon{color:var(--indigo)}
.deck.values{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}

/* ---- capture ---- */
.capture{background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:1.1rem 1.2rem 1.2rem;margin-top:1.4rem}
.capture h3{font-size:1.05rem;font-weight:700;margin-bottom:.35rem}
.capture-title{font-size:1.5rem;font-weight:800;line-height:1.15;margin-top:.4rem}
.capture-sub{font-size:1rem;line-height:1.6;color:var(--text-light);margin:.4rem 0 1.4rem;max-width:44rem}
.capture .why{font-size:.92rem;color:var(--text-light);margin-bottom:.9rem}
label,.label{display:block;font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin:.9rem 0 .3rem}
textarea,input[type=text]{width:100%;padding:.65rem .8rem;border:1.5px solid var(--border);
  border-radius:9px;font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--text);
  background:var(--white)}
textarea{resize:vertical;min-height:5.5rem}
.saved{font-size:.85rem;color:var(--good);font-family:var(--display);font-weight:600;
  margin-top:.6rem;min-height:1.1rem}

/* ---- commons path ---- */
.paths{display:grid;gap:.8rem;grid-template-columns:1fr;list-style:none;padding:0;margin:1rem 0 0}
.path{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:.9rem 1rem;
  text-align:left;width:100%;font-family:var(--body);color:var(--text)}
.path[aria-pressed="true"]{border-color:var(--indigo);box-shadow:0 0 0 1.5px var(--indigo);background:var(--lav-soft)}
.path b{display:block;font-family:var(--display);font-weight:700;color:var(--indigo);margin-bottom:.2rem}
.path span{font-size:.9rem;color:var(--text-light);line-height:1.5}

/* ---- vote ---- */
.scale{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.scale button{width:2.9rem;height:2.9rem;border-radius:9px;border:1.5px solid var(--border);
  background:var(--white);color:var(--indigo);font-weight:700;font-size:1rem}
.scale button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:var(--white)}
.scale-ends{display:flex;justify-content:space-between;max-width:17rem;font-size:.78rem;
  color:var(--text-muted);margin-top:.35rem}

/* ---- footers of each step ---- */
.nav-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.3rem;
  border-top:1px solid var(--border)}
.btn{border:none;border-radius:10px;padding:.72rem 1.3rem;font-weight:700;font-size:.95rem;min-height:44px}
.btn.go{background:var(--accent);color:var(--indigo)}
.btn.go:hover{background:var(--peach)}
.btn.back{background:var(--white);color:var(--indigo);border:1.5px solid var(--border)}
.btn.back:hover{border-color:var(--indigo)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- notes ---- */
.brief{background:var(--indigo);color:var(--white);border-radius:14px;padding:1.4rem 1.5rem;margin-bottom:1.8rem}
.brief-kicker{font-family:var(--display);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.brief p:not(.brief-kicker){font-size:1.3rem;line-height:1.55;color:var(--white)}
.brief-list{margin:.7rem 0 1.9rem;padding-left:1.3rem;max-width:48rem}
.brief-list li{font-size:1.15rem;line-height:1.6;margin-bottom:.6rem}
.brief-body{font-size:1.15rem;line-height:1.6;max-width:48rem;margin-bottom:1.9rem}
.brief-note{font-size:1rem;color:var(--text-light);font-style:italic;margin-top:1.6rem}
.table-wrap{overflow-x:auto;margin:.8rem 0 1.4rem}
.brief-table{border-collapse:collapse;width:100%;min-width:30rem}
.brief-table th{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--indigo);
  text-align:left;padding:.6rem .9rem;background:var(--lav);border:1px solid var(--border);width:50%}
.brief-table th:last-child{color:var(--accent-deep);background:#FFF9F4}
.brief-table td{font-size:1.08rem;line-height:1.55;padding:.7rem .9rem;
  border:1px solid var(--border);vertical-align:top;background:var(--white)}
.brief-table td:last-child{background:#FFFCF9}
.note{border:1px dashed var(--accent);background:#FFF9F4;border-radius:12px;
  padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.92rem;line-height:1.6}
.note b{font-family:var(--display);color:var(--indigo)}
.gap{border:1px dashed var(--periwinkle);background:var(--lav-soft);border-radius:12px;
  padding:.9rem 1.1rem;margin:1.2rem 0;font-size:.92rem;line-height:1.6;color:var(--text-light)}

/* ---- the end ---- */
.outbox{background:var(--indigo);color:var(--white);border-radius:14px;padding:1.3rem 1.4rem;margin-top:1.6rem}
.outbox h3{color:var(--white);font-size:1.1rem;margin-bottom:.4rem}
.outbox p{color:var(--periwinkle);font-size:.94rem;margin-bottom:.9rem}
.outbox textarea{background:var(--white);min-height:13rem;font-size:.85rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

@media (min-width:62rem){
  /* The service diagram: lanes down the side, the story running across. */
  .steps-list{grid-template-columns:8rem repeat(var(--cols,6),1fr);gap:.4rem;align-items:stretch}
  .lane-head{display:flex;align-items:center;font-family:var(--display);font-weight:600;
    font-size:.78rem;color:var(--indigo);padding:.5rem .7rem .5rem 0;
    border-right:2px solid var(--border);grid-column:1;grid-row:var(--row);line-height:1.3}
  .lane-row{display:block;background:var(--lav-soft);border-radius:8px;z-index:0;
    grid-row:var(--row);grid-column:2/-1;min-height:2.6rem}
  .lane-row.alt{background:var(--lav)}
  .sq{position:relative;z-index:1;padding:.45rem .6rem;grid-row:var(--row);grid-column:var(--col)}
  .sq .lane{display:none}
  .sq .txt{font-size:.84rem;line-height:1.24}
}
@media (min-width:46rem){
  .pick{grid-template-columns:repeat(2,1fr)}
  .scn{grid-template-columns:minmax(0,17rem) 1fr;gap:1.8rem}
  .paths{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:64rem){ .pick{grid-template-columns:repeat(3,1fr)} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }

/* ---- the team name, and sending ---- */
.team-box{background:var(--white);border:1px solid var(--border);border-radius:14px;
  padding:1.1rem 1.2rem 1.2rem;margin-bottom:1.8rem;max-width:36rem}
.team-box input{margin-bottom:.5rem}
.team-why{font-size:.92rem;line-height:1.55;color:var(--text-light);margin:0}
.send-status{font-size:1rem;line-height:1.5;margin:.9rem 0 0;min-height:1.3rem;color:var(--periwinkle)}
.send-status.good{color:#9AE6B4;font-weight:600}
.send-status.bad{color:#FEB2B2;font-weight:600}
.out-details{background:transparent;border:1px solid rgba(255,255,255,.3);margin:1rem 0 0}
.out-details summary{color:var(--white);font-size:.9rem}
.out-details textarea{margin-top:.7rem}

/* ---- the invitation to carry it on ---- */
.joinbox{background:var(--lav-soft);border:1px solid var(--periwinkle);border-radius:14px;
  padding:1.3rem 1.4rem 1.4rem;margin-top:1.8rem}
.joinbox h3{font-size:1.2rem;font-weight:800;margin-bottom:.5rem}
.joinbox p{font-size:1rem;line-height:1.6;color:var(--text);margin-bottom:.8rem}
.joinbox p b{color:var(--indigo)}
.joinbox-links{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin:1.1rem 0 0}
.joinbox-links a{font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--indigo);
  text-decoration:none;border-bottom:1px solid var(--periwinkle);padding-bottom:1px}
.joinbox-links a:hover{border-bottom-color:var(--indigo)}
.joinbox-links a.join-primary{background:var(--accent);color:var(--indigo);border:none;
  border-radius:10px;padding:.65rem 1.2rem;font-weight:700}
.joinbox-links a.join-primary:hover{background:var(--peach)}


/* ---- how we will use what you make today ---- */
.notice{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--indigo);
  border-radius:12px;padding:1.3rem 1.4rem 1.4rem;margin-bottom:1.8rem;max-width:48rem}
.notice h3{font-size:1.2rem;font-weight:800;margin-bottom:.7rem}
.notice p{font-size:1.02rem;line-height:1.65;color:var(--text);margin-bottom:.9rem}
.notice-warn{background:#FFF9F4;border:1px dashed var(--accent);border-radius:9px;
  padding:.7rem .9rem;margin:1.1rem 0}
.notice-warn b{color:var(--accent-deep)}
.notice-list{margin:.4rem 0 1rem;padding-left:1.25rem}
.notice-list li{font-size:.98rem;line-height:1.6;color:var(--text-light);margin-bottom:.5rem}
.notice-contact{font-size:.98rem;margin-bottom:0}
.notice-contact a{color:var(--accent-deep)}

/* ---- the call to action ---- */
.cta-open textarea{min-height:12rem;font-size:1.02rem}
.cta-q{margin:1.5rem 0 .4rem;text-transform:none;letter-spacing:0;font-size:1rem;color:var(--text)}
.cta-q b{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;
  line-height:1.3;color:var(--indigo)}
.cta-q span{display:block;font-family:var(--body);font-size:.96rem;line-height:1.55;
  color:var(--text-light);margin-top:.25rem;font-weight:400}

/* ---- the line that says the work is saved ----
   It sits over the page rather than in it. The message changes length as a
   group types, and in the flow of the page that moved everything below it up
   and down while someone was still writing. */
.autosave{position:fixed;right:16px;bottom:14px;z-index:40;
  width:max-content;max-width:min(26rem,calc(100% - 32px));margin:0;
  padding:.6rem 1rem;border:1px solid var(--border);border-radius:999px;
  background:var(--white);box-shadow:0 6px 18px rgba(44,45,114,.14);
  font-family:var(--display);font-weight:600;font-size:.82rem;line-height:1.4;
  color:var(--text-muted);text-align:left;pointer-events:none}
@media (max-width:640px){
  .autosave{right:12px;left:12px;bottom:10px;max-width:none;text-align:center}
}
.autosave:empty{display:none}
.autosave.good{color:var(--good)}
.autosave.bad{color:#c53030;border-color:#f5bcbc}

/* ---- the greeting on the first screen ---- */
.step-welcome .step-head{margin-bottom:1.8rem}
.step-welcome .step-head h2{font-size:clamp(2.6rem,7vw,4.2rem);line-height:1.02;letter-spacing:-.02em}
.step-welcome .step-head p{font-size:1.12rem;line-height:1.6;margin-top:1rem;max-width:46rem}

/* ---- how the page sits beside the room ---- */
.how-it-works{font-size:1.02rem;line-height:1.65;color:var(--text);margin:0 0 1.8rem;
  max-width:46rem;border-left:3px solid var(--accent);padding-left:1.1rem}

/* ---- a drawing beside the step heading ---- */
.step-head.has-art{position:relative;padding-right:150px}
.step-art{position:absolute;top:-6px;right:0;width:auto;height:auto;
  max-width:130px;max-height:120px}
@media (max-width:720px){
  .step-head.has-art{padding-right:0}
  .step-art{position:static;display:block;margin:0 0 .6rem;max-width:100px;max-height:94px}
}

/* ---- a wide drawing under the step heading ---- */
.step-banner{display:block;width:100%;max-width:640px;height:auto;margin:0 0 1.6rem}

/* ---- the four boxes on the reflect step ----
   Current down the left, future down the right, so the pairs line up. The
   boxes stay in reading order in the markup, which is the order they stack
   in on a phone. */
.quad-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;
  grid-template-rows:auto auto;gap:0 1.2rem}
.quad label{margin-top:.9rem}
@media (max-width:640px){
  .quad-grid{grid-template-columns:1fr;grid-auto-flow:row;grid-template-rows:none;gap:0}
}

/* ---- what to say about each step of a new service journey ---- */
.prompt-list{margin:.2rem 0 .4rem 1.1rem;padding:0;font-size:.95rem;line-height:1.6;
  color:var(--text-light)}
.prompt-list li{margin:.15rem 0}

/* ---- the drawing beside the sample diagram ---- */
.map-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.map-head h3{margin:0}
.map-icon{width:auto;height:56px;flex:none}
@media (max-width:640px){.map-icon{height:44px}}

/* ---- the ten points, for a group that wants them one at a time ---- */
.cta-points{margin-top:1.2rem}
.cta-points .inner{padding-top:.4rem}

/* ---- sending one phase to the Commons ---- */
.btn.keep{background:var(--white);color:var(--indigo);border:1.5px solid var(--indigo)}
.btn.keep:hover{background:var(--lav-soft)}
.keep-status{font-size:.95rem;line-height:1.5;margin:.7rem 0 0;min-height:3rem;
  color:var(--text-light)}
.keep-status.good{color:var(--good);font-weight:600}
.keep-status.bad{color:#c53030;font-weight:600}

/* ---- the four note boxes take a list, and scroll when it gets long ---- */
.quad textarea{min-height:9.5rem;max-height:26rem;overflow-y:auto}

/* ---- the drawings of people working together, on the welcome ---- */
.collab-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;
  align-items:end;margin:0 0 1.8rem}
.collab-row img{display:block;width:100%;height:auto}
@media (max-width:640px){
  .collab-row{grid-template-columns:1fr 1fr;gap:.8rem}
  .collab-row img:last-child{grid-column:1 / -1;width:60%;margin:0 auto}
}

/* ---- a drawing beside what a group writes ---- */
.spot{float:right;width:min(230px,38%);height:auto;margin:.2rem 0 .8rem 1.6rem}
@media (max-width:640px){
  .spot{float:none;display:block;width:170px;margin:0 auto .9rem}
}