/* S09 — Uma comunidade de histórias e conexões. MOBILE-FIRST (ADR-023): a base é o celular; o desktop só acrescenta, a partir de 900 px de contêiner.
   Arte-mãe (faixa de 682 px): texto 8,7–40% | mosaico 45,4–95,3% (retrato vertical + 2 fotos e o manuscrito em cima + 3 fotos embaixo). Cena CLARA, entre a
   S08 e a S10 (escuras). Contêiner NOMEADO (d09): todo @container consulta por nome (lição 64). Luz e sombras estáticas, sem animação contínua.
   Sem JS a cena aparece completa. */
.d09{--acc:#e72b6c;--acc-fill:#d02761;--ink:#111;position:relative;z-index:1;overflow:hidden;background:#f3efea;color:var(--ink);font-family:var(--font-body,"Helvetica Neue",Helvetica,Arial,sans-serif);container:d09/inline-size}
.d09-in{box-sizing:border-box;position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(20px,4.5cqw,36px);padding:clamp(36px,8cqw,84px) clamp(16px,3.87cqw,48px)}
.d09 .d09-copy h2{color:var(--ink)}   /* especificidade (0,2,1): vence [data-bx-mode] h2 do tema (0,1,1), que vem depois na folha; só a COR (lição 49) */
.d09-copy h2{margin:0 0 clamp(10px,1.4cqw,18px);font-family:var(--font-title,inherit);font-size:clamp(24px,7cqw,40px);line-height:1.1;letter-spacing:-.01em}
.d09-copy h2 span{display:block}
.d09-h-l{font-weight:300}
.d09-h-b{font-weight:800}
.d09-copy p{margin:0 0 clamp(16px,2.4cqw,26px);max-width:38ch;font-size:clamp(14px,1.45cqw,18px);line-height:1.5;color:#2c2a28}

/* fileira de avatares + botão "+" (só cadastro) */
.d09-join{display:flex;align-items:center;gap:12px}
.d09-av{list-style:none;margin:0;padding:0;display:flex}
.d09-av li{flex:none;width:var(--a);height:var(--a);margin-left:calc(var(--a)*-.22);border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px #f3efea}
.d09-av li:first-child{margin-left:0}
.d09-av img{display:block;width:100%;height:100%;object-fit:cover}
.d09{--a:clamp(36px,10cqw,46px)}
.d09-plus{display:inline-grid;place-items:center;flex:none;box-sizing:border-box;width:max(44px,var(--a));height:max(44px,var(--a));border-radius:50%;background:#111;border:1.5px solid #111;color:#ff7fae;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.d09-plus svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.d09-plus:hover,.d09-plus:focus-visible{background:var(--acc-fill);border-color:var(--acc-fill);color:#fff}   /* #e72b6c com branco dá 4,23:1; --acc-fill dá 5,0:1 */
.d09-plus:focus-visible{outline:2px solid #111;outline-offset:3px}

/* mosaico: no celular uma grade de 6 colunas (retrato vertical grande + 2 fotos ao lado; 3 fotos embaixo; manuscrito); .d09-r some da árvore */
.d09-mosaic{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto auto auto auto;gap:clamp(6px,1.6cqw,10px)}
.d09-r{display:contents}
.d09-t{margin:0;min-width:0;min-height:0;overflow:hidden;border-radius:clamp(8px,1.6cqw,12px);background:#e4dde2;box-shadow:0 4px 14px rgba(40,20,30,.14)}
.d09-t img{display:block;width:100%;height:100%;object-fit:cover}
.d09-t1{grid-column:1/5;grid-row:1/3;aspect-ratio:4/5}
.d09-t2{grid-column:5/7;grid-row:1}
.d09-t3{grid-column:5/7;grid-row:2}
.d09-t4{grid-column:1/3;grid-row:3;aspect-ratio:1}
.d09-t5{grid-column:3/5;grid-row:3;aspect-ratio:1}
.d09-t6{grid-column:5/7;grid-row:3;aspect-ratio:1}
.d09-script{grid-column:1/-1;grid-row:4;margin:clamp(4px,1cqw,8px) 0 0;text-align:center;color:#c4194f;font-family:"Segoe Script","Bradley Hand","Snell Roundhand","Lucida Handwriting","Brush Script MT",cursive;font-size:clamp(18px,5.4cqw,26px);line-height:1.25;transform:rotate(-3deg)}   /* #c4194f = 5,10:1 sobre #f3efea; #e72b6c daria 3,70:1 */
.d09-script span{display:block}
.d09-notice{margin:0;max-width:62ch;font-size:12px;line-height:1.4;color:#5c5760}   /* 6,14:1 sobre #f3efea */

/* >=600 px: o mosaico deixa de ocupar a largura toda */
@container d09 (min-width:600px){
  .d09-mosaic{width:100%;max-width:min(100%,640px);justify-self:center}
}
/* >=900 px: 3 colunas como a arte-mãe. O mosaico vira: retrato vertical | duas linhas (2 fotos + manuscrito em cima; 3 fotos embaixo). */
@container d09 (min-width:900px){
  .d09-in{max-width:none;grid-template-columns:minmax(0,318.5fr) minmax(0,49fr) minmax(0,499fr);column-gap:0;row-gap:clamp(10px,1.4cqw,18px);align-items:center;padding-block:clamp(28px,3.6cqw,52px);padding-inline:8.65cqw 4.7cqw}
  .d09-copy{grid-column:1;grid-row:1}
  .d09-mosaic{grid-column:3;grid-row:1;max-width:none;justify-self:stretch;aspect-ratio:749/280;grid-template-columns:203fr 546fr;grid-template-rows:minmax(0,1fr);column-gap:clamp(6px,.8cqw,12px);gap:0}
  .d09-mosaic{column-gap:1.5cqw}
  .d09-r{display:grid;min-width:0;min-height:0;gap:1.1cqw;align-items:stretch}
  .d09-r1{grid-column:2;grid-row:1;align-self:start;grid-template-columns:155fr 173fr 190fr;height:51%}
  .d09-r2{grid-column:2;grid-row:1;align-self:end;grid-template-columns:123fr 132fr 222fr;width:93%;height:46%}
  .d09-t1{grid-column:1;grid-row:1;aspect-ratio:auto;height:100%}
  .d09-t2,.d09-t3,.d09-t4,.d09-t5,.d09-t6{grid-column:auto;grid-row:auto;aspect-ratio:auto;height:100%}
  .d09-script{grid-column:auto;grid-row:auto;align-self:center;margin:0;text-align:left;font-size:clamp(14px,1.9cqw,28px)}
  .d09-notice{grid-column:3;grid-row:2;justify-self:start}
  .d09-copy h2{font-size:clamp(20px,2cqw,30px)}
  .d09-copy h2 span{white-space:nowrap}
  .d09{--a:clamp(36px,3.1cqw,46px)}
}