/* Section-scoped layout; the shared theme remains the palette authority. */
.brule-page{margin:0;background:var(--paper,#f7f5ef);color:var(--ink,#182b35);font-family:system-ui,sans-serif;line-height:1.55}.brule-page main,.brule-header,.brule-footer{max-width:1160px;margin-inline:auto;padding:24px}.brule-header,.brule-header nav,.brule-actions,.brule-section-heading{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.brule-header{justify-content:space-between}.brule-page a{color:inherit;text-underline-offset:.2em}.brule-page button,.brule-page input,.brule-page select{color:inherit;background:var(--paper,#f7f5ef)}.brule-page a,.brule-page button,.brule-page input,.brule-page select{overflow-wrap:anywhere}.brule-page :is(button,input,select,.brule-button){font:inherit;box-sizing:border-box;min-height:44px;border:1px solid currentColor;border-radius:9px;padding:10px 14px}.brule-page :is(button,.brule-button){cursor:pointer;text-decoration:none;font-weight:650}.brule-page button:disabled,.brule-page input:disabled,.brule-page select:disabled{cursor:not-allowed;opacity:.65}.brule-page :focus-visible{outline:3px solid currentColor;outline-offset:4px}.brule-page .skip{position:absolute;left:12px;top:-100px;z-index:1000}.brule-page .skip:focus{top:10px}.brule-intro{padding:32px 0 40px;max-width:760px}.brule-intro h1{font-size:clamp(2.5rem,7vw,4.8rem);line-height:1.04;letter-spacing:-.045em;margin:.25em 0}.brule-lead{font-size:clamp(1.2rem,3vw,1.7rem)}.brule-kicker{font-size:.75rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}.brule-page h2{font-size:1.8rem;line-height:1.2}.brule-page main>section{margin-block:32px 56px;scroll-margin-top:100px}.brule-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.brule-card,.brule-pad,.brule-note{border:1px solid currentColor;border-radius:14px;padding:20px;min-width:0}.brule-card h3,.brule-pad h3{line-height:1.3;margin:.5em 0}.brule-card a{display:inline-block;min-height:44px;padding-block:8px;box-sizing:border-box}.brule-small,.brule-tags{font-size:.875rem}.brule-tags{font-weight:650}.brule-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto;align-items:end;gap:12px}.brule-page label{display:grid;gap:6px;font-size:.875rem;font-weight:650}.brule-page input,.brule-page select{width:100%;min-width:0}.brule-group-title{margin-top:32px}.brule-section-heading{justify-content:space-between}.brule-file-name{overflow-wrap:anywhere;min-height:1.5em}.brule-pad input{padding:8px;max-width:100%}.brule-pad .brule-actions{margin-top:12px}.brule-pad [data-pad-status]{min-height:2.8em}.brule-page [hidden]{display:none!important}.brule-footer{border-top:1px solid currentColor}.brule-note{max-width:850px}.brule-page [data-play]{min-width:90px}.brule-page [data-stop]{font-weight:800}@media(max-width:1000px){.brule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.brule-page main,.brule-header,.brule-footer{padding:18px}.brule-grid,.brule-filters{grid-template-columns:minmax(0,1fr)}.brule-card,.brule-pad{padding:16px}.brule-header nav{font-size:.9rem}.brule-intro{padding-top:16px}}

.brule-video{margin-block:14px 4px}.brule-video iframe{display:block;box-sizing:border-box;width:100%;min-width:200px;min-height:200px;height:auto;aspect-ratio:16/9;border:0;margin-top:12px}.brule-video [data-close-video]{margin-top:4px}

/* Included clips remain additive to the six local-file pads. */
[data-clips]{margin:1.5rem 0 2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--line,#687b88)}.brule-included-clip{display:flex;flex-direction:column;gap:.65rem}.brule-included-clip h4,.brule-included-clip p{margin:0}.brule-clip-source{overflow-wrap:anywhere}.brule-included-clip button{margin-top:auto;min-height:44px}.brule-included-clip button[aria-pressed="true"]{outline:3px solid currentColor;outline-offset:3px}.brule-included-clip button[aria-busy="true"]{cursor:progress}.brule-included-clip[hidden]{display:none}

/* Reuse the same owner-supplied source image as the DJ soundboard. */
.brule-clip-heading{display:flex;align-items:center;gap:.65rem;min-width:0}
.brule-clip-heading h4{min-width:0;overflow-wrap:anywhere}
.brule-clip-head{position:relative;display:block;flex:none;width:48px;height:48px;overflow:hidden;border-radius:50%}
.brule-clip-head img{position:absolute;display:block;width:255.5%;height:144.5%;max-width:none;left:-92.5%;top:-6%}