/* Framed pictures and boxes (owner, 2026-10-16): every risograph picture gets the cream mat, thin rule and soft shadow
   of the framed header art (the News globe, the Sectors wheel), and every card a clearer edge. CSS only, loaded after
   mc.css and wire-b.css so it wins at equal weight. Heat tiles (.hg) keep their own fill and edge. */
:root{--frame-mat:var(--surface);--frame-rule:var(--line-strong);--frame-shadow:0 8px 22px rgba(30,42,68,.16)}

/* Market News story pictures: a mat inside the card, the picture framed in it */
.wb-art{padding:8px 8px 0;background:var(--frame-mat)}
.wb-second .wb-art{padding:6px}
.wb-art img{border-radius:8px;border:1px solid var(--frame-rule);box-shadow:var(--frame-shadow)}

/* Learn lesson cards */
.mc .lcard img{width:calc(100% - 16px);margin:8px 8px 0;border:1px solid var(--frame-rule);border-bottom:1px solid var(--frame-rule);border-radius:8px;box-shadow:var(--frame-shadow)}

/* Home hero, home split picture, lesson and consult heroes, learning-path hero: a cream mat like a print */
.mc .hero-art{border:8px solid var(--frame-mat);background:var(--frame-mat)}
.mc .split-art img,.mc .lesson-hero,.mc .lp-hero-art img{border:8px solid var(--frame-mat);outline:1px solid var(--frame-rule);box-shadow:var(--frame-shadow)}
.mc .hub-art{border:8px solid var(--frame-mat);outline:1px solid var(--frame-rule)}

/* Cards and panels: a clearer edge and a little depth, the same family as the tiles */
.mc .box,.mc .lcard,.mc .tcard,.mc .tsec,.mc .pick,.mc .workspace-panel,.mc .option-note,.wb-card{border-color:var(--frame-rule);box-shadow:0 1px 0 rgba(30,42,68,.04),0 6px 16px rgba(30,42,68,.06)}

@media (max-width:420px){.mc .hero-art,.mc .hub-art{border-width:6px}.mc .split-art img,.mc .lesson-hero,.mc .lp-hero-art img{border-width:6px}}