/* Reel Room media components: before/after loops, look gallery, Reel Notes panel. Responsive, no fixed heights. */
.ba{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;margin:20px auto;max-width:620px}
.ba .arrow{font:700 34px/1 'DM Sans',sans-serif;color:#7A1E2E}
.clip{margin:0;position:relative}
.clip .frame{position:relative;border-radius:18px;overflow:hidden;background:#111;box-shadow:0 10px 30px rgba(26,18,16,.16);aspect-ratio:9/16}
.clip video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.clip .lbl{position:absolute;top:10px;left:10px;z-index:2;font:700 12px/1 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:7px 10px;border-radius:30px;background:rgba(12,12,15,.72);color:#fff}
.clip.after .lbl{background:#7A1E2E}
.clip .snd{position:absolute;right:10px;bottom:10px;z-index:2;border:0;border-radius:30px;padding:8px 12px;font:700 12px/1 'DM Sans',sans-serif;background:rgba(255,255,255,.92);color:#1A1210;cursor:pointer;width:auto;margin:0;box-shadow:none}
.clip .snd[aria-pressed="true"]{background:#7A1E2E;color:#fff}
.clip figcaption{font-size:14px;line-height:1.45;color:#5A4E48;margin-top:10px}
.clip figcaption b{color:#1A1210}
.looksv{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:16px}
.looksv figure{margin:0;background:#FAF6EF;border:1px solid #E8DCC9;border-radius:14px;overflow:hidden}
.looksv .frame{position:relative;aspect-ratio:9/16;background:#e9e2d8}
.looksv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.looksv figcaption{padding:10px 12px 12px;font-size:13.5px;line-height:1.45;color:#5A4E48}
.looksv figcaption b{display:block;color:#1A1210;font-size:15px}
.notes{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;align-items:start;background:#FAF6EF;border:1px solid #E8DCC9;border-radius:20px;padding:20px;margin:18px 0}
.notes .head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.notes .head b{font:700 17px/1.2 'DM Sans',sans-serif;color:#1A1210}
.notes .head span{font-size:13px;color:#8A7F76}
.note{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:#fff;border:1px solid #E8DCC9;border-radius:14px;padding:12px 14px;margin-bottom:10px;cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit}
.note:hover,.note:focus-visible{border-color:#7A1E2E;outline:none}
.note .tc{font:600 12.5px/1.6 ui-monospace,Menlo,monospace;background:#F0E9DB;border-radius:8px;padding:3px 8px;color:#1A1210;white-space:nowrap}
.note .txt{font-size:15px;line-height:1.45;color:#1A1210}
.note .fix{display:block;margin-top:6px;font-size:13px;color:#1b7a58}
.note .fix::before{content:'✓ ';font-weight:700}
.notes .compose{border:1px dashed #D8CBB6;border-radius:14px;padding:12px 14px;font-size:14px;color:#8A7F76}
@media (max-width:760px){
  .looksv{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes{grid-template-columns:1fr}
  .notes .clip{width:100%;max-width:240px;margin:0 auto}
}
@media (max-width:520px){
  .ba{grid-template-columns:1fr 1fr;gap:10px}
  .ba .arrow{display:none}
  .clip .snd{padding:7px 9px;font-size:11px}
  .clip figcaption{font-size:13px}
}