.br10-reading { --read-accent: var(--accent, #8767a8); --read-surface: var(--surface, #272330); --read-stroke: var(--line, #8885); margin-block: 3rem; color: var(--ink, inherit); }
.br10-reading > h2 { margin: 0 0 1rem; font-size: clamp(1.45rem, 3vw, 2.25rem); }
.br10-reading-list { display: grid; align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.br10-reading-item { display: grid; min-width: 0; border: 1px solid var(--read-stroke); background: var(--read-surface); border-radius: 1rem; overflow: clip; }
.br10-reading-card { padding: 1.1rem; min-width: 0; }
.br10-reading-card h3 { margin: 0 0 .8rem; font-size: clamp(1rem, 1.3vw, 1.35rem); line-height: 1.36; overflow-wrap: anywhere; }
.br10-reading-photo img { display: block; width: 100%; aspect-ratio: 2.45; object-fit: contain; background: var(--bg, #17151a); }
.br10-reading-button { cursor: pointer; padding: .55rem .8rem; font: inherit; font-size: .875rem; font-weight: 650; color: var(--ink, inherit); background: transparent; border: 1px solid var(--read-accent); border-radius: .55rem; text-align: start; }
.br10-reading-button:hover, .br10-reading-button:focus-visible { outline: 2px solid var(--read-accent); outline-offset: 2px; }
.br10-reading-panel { grid-column: 1 / -1; min-width: 0; padding: clamp(.75rem, 2.6vw, 1.75rem); border-top: 1px solid var(--read-stroke); overflow: auto; }
.br10-reading-panel[hidden], .br10-reading-status:empty { display: none !important; }
.br10-reading-status { margin: .6rem 0 0; font-size: .9rem; }
.br10-reading-item:has(.br10-reading-panel:not([hidden])) { grid-column: 1 / -1; }
.br10-reading-panel .b10-wrap { width: 100%; max-width: 100%; }
.br10-reading-panel .b10-hero { display: block !important; min-height: 0 !important; }
.br10-reading-panel .b10-art img { max-width: 100%; max-height: 25rem; object-fit: contain; }
.br10-reading-panel .b10-section, .br10-reading-panel .b10-rich-prose { min-width: 0; overflow-wrap: anywhere; }
.br10-reading[data-layout="1"] .br10-reading-list { grid-template-columns: 1fr; }
.br10-reading[data-layout="2"] .br10-reading-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.br10-reading[data-layout="3"] .br10-reading-item:first-child { grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items:center; }
.br10-reading[data-layout="4"] .br10-reading-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.br10-reading[data-layout="4"] .br10-reading-item:last-child { grid-column: 1/-1; grid-template-columns: minmax(0,1fr) minmax(0,2fr); align-items:center; }
.br10-reading[data-layout="5"] .br10-reading-list { grid-template-columns: 1fr; }
.br10-reading[data-layout="5"] .br10-reading-item { grid-template-columns: minmax(0,1fr) minmax(0,3fr); align-items:center; }
.br10-reading[data-layout="6"] .br10-reading-list { grid-template-columns: 1fr; }
.br10-reading[data-layout="6"] .br10-reading-item { grid-template-columns: minmax(0,3fr) minmax(0,1fr); align-items:center; }
.br10-reading[data-layout="6"] .br10-reading-photo { grid-column: 2; grid-row: 1; }
.br10-reading[data-layout="6"] .br10-reading-card { grid-column: 1; grid-row: 1; }
.br10-reading[data-layout="7"] .br10-reading-list { grid-template-columns: 2fr 1fr 1fr; }
.br10-reading[data-layout="8"] .br10-reading-list { grid-template-columns: 1fr 1fr 2fr; }
.br10-reading[data-layout="9"] .br10-reading-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.br10-reading[data-layout="9"] .br10-reading-item:first-child { grid-column: 1/-1; }
.br10-reading[data-layout="10"] .br10-reading-item { grid-template-rows: auto auto; }
.br10-reading[data-layout="10"] .br10-reading-photo { grid-row: 2; }
.br10-reading[data-layout="10"] .br10-reading-card { grid-row: 1; }
.br10-reading[data-style="1"] .br10-reading-item { border-radius: .15rem; border-top: 3px solid var(--read-accent); }
.br10-reading[data-style="2"] .br10-reading-item { border-radius: 1.7rem; border-width: 2px; }
.br10-reading[data-style="3"] .br10-reading-item { border: 0; border-inline-start: 4px solid var(--read-accent); border-radius: 0; }
.br10-reading[data-style="4"] .br10-reading-item { border-style: dashed; }
.br10-reading[data-style="5"] .br10-reading-item { border-radius: 1.35rem .2rem; border-bottom: 3px solid var(--read-accent); }
.br10-reading[data-style="6"] .br10-reading-item { background: linear-gradient(145deg,var(--read-surface) 35%,var(--read-stroke)); }
.br10-reading[data-style="7"] .br10-reading-item { box-shadow: 0 .25rem 0 var(--read-stroke); }
.br10-reading[data-style="8"] .br10-reading-item { border-radius: .35rem; border-inline-end: 4px double var(--read-accent); }
.br10-reading[data-style="9"] .br10-reading-item { border-radius: .3rem 1.6rem 1.6rem .3rem; border-block-end: 3px solid var(--read-accent); }
@media(max-width:720px) {
  .br10-reading[data-layout] .br10-reading-list { grid-template-columns: minmax(0,1fr); }
  .br10-reading[data-layout] .br10-reading-item { grid-column: auto; grid-template-columns: minmax(0,1fr); }
  .br10-reading[data-layout] .br10-reading-item > * { grid-column: 1; grid-row: auto; }
}