.broo-footer{--footer-bg:#0a0a0a;--footer-text:#fff;--footer-muted:#b4b4ae;--footer-accent:#d7ff4f;container:broo-footer / inline-size;background:var(--footer-bg);color:var(--footer-text);font-family:"Satoshi",system-ui,sans-serif}
.broo-footer *{box-sizing:border-box}
.broo-footer-main{width:100%;max-width:1440px;margin:0 auto;padding:48px clamp(20px,4cqi,64px) 40px;display:grid;grid-template-columns:minmax(160px,.8fr) minmax(260px,1.1fr) minmax(280px,1fr);gap:40px 48px;align-items:start}
.broo-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.broo-footer-social{display:flex;flex-wrap:wrap;gap:4px;margin-left:-10px}
.broo-footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;min-width:0;align-content:start}
.broo-footer-nav a{display:flex;align-items:center;min-height:44px;padding:6px 0;color:#e4e4df!important;font-size:14px;font-weight:600;line-height:1.45;white-space:normal!important;overflow-wrap:anywhere;text-decoration:none}
.broo-footer-nav a:hover{color:var(--footer-accent)!important}
.broo-footer-cta{display:flex;flex-direction:column;gap:14px;min-width:0;margin:0;padding-top:8px}
.broo-footer-fields{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;min-width:0}
.broo-footer-fields input{flex:1 1 160px;min-width:0;width:100%;min-height:46px}
.broo-footer-fields button,.broo-footer-fields a{display:flex;align-items:center;justify-content:center;min-height:46px;flex:0 0 auto;line-height:1.3;text-align:center}
.broo-footer-bottom{width:100%;max-width:1440px;margin:0 auto;border-top:1px solid #262624;padding:20px clamp(20px,4cqi,64px) 24px;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;font-size:12.5px;line-height:1.5;color:var(--footer-muted)}
.broo-footer a:focus-visible,.broo-footer button:focus-visible,.broo-footer input:focus-visible{outline:2px solid var(--footer-accent);outline-offset:4px}
@container broo-footer (max-width:1050px){.broo-footer-main{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:28px 40px;padding-top:36px;padding-bottom:32px}.broo-footer-cta{grid-column:1 / -1;border-top:1px solid #262624;padding-top:24px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:16px 40px;align-items:center}.broo-footer-fields{flex-wrap:nowrap}}
@container broo-footer (max-width:600px){.broo-footer-main{grid-template-columns:minmax(0,1fr);gap:26px;padding-top:32px;padding-bottom:28px}.broo-footer-brand{gap:16px}.broo-footer-nav{gap:4px 20px}.broo-footer-cta{display:flex;gap:14px;padding-top:24px;align-items:stretch}.broo-footer-fields{flex-wrap:wrap}.broo-footer-fields input{flex-basis:170px}.broo-footer-fields button,.broo-footer-fields a{flex-grow:1}.broo-footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;padding-top:18px;padding-bottom:22px}}

.broo-header{background:#fff;border-bottom:1px solid #e7e7e2}
.broo-header-row{display:flex;align-items:center;gap:20px;min-height:76px;padding:14px 24px;flex-wrap:nowrap}
.broo-header-logo{flex:none;font-size:28px;font-weight:900;letter-spacing:-.055em}
.broo-header-nav{display:flex;align-items:center;gap:14px;flex:none}
.broo-header-nav a{font-size:13px;font-weight:700;white-space:nowrap}
.broo-header-search,.broo-panel-search{display:flex;align-items:center;gap:10px;min-width:0;background:#f4f4f1;border:1px solid #e7e7e2;border-radius:100px;padding:0 16px;min-height:44px}
.broo-header-search{flex:1 1 180px;max-width:380px;margin-left:auto}
.broo-header-search input,.broo-panel-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;font:500 14px Satoshi,system-ui;color:#0a0a0a}
.broo-header-search svg,.broo-panel-search svg{width:18px;height:18px;flex:none}
.broo-header-actions{display:flex;align-items:center;gap:10px;flex:none}
.broo-header-join,.broo-panel-join{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:100px;background:#0a0a0a;color:white;font-size:14px;font-weight:700;white-space:nowrap}
.broo-header-join:hover,.broo-panel-join:hover{background:#30302c;color:#fff}
.broo-icon-button{width:44px;height:44px;flex:0 0 44px;display:flex;align-items:center;justify-content:center;border:0;background:none;border-radius:50%;color:#0a0a0a;cursor:pointer;padding:10px}
.broo-icon-button:hover{background:#f4f4f1}.broo-icon-button svg{width:20px;height:20px;flex:none}
.broo-search-toggle,.broo-menu-toggle{display:none}
.broo-menu-panel{padding:20px 24px 24px;border-top:1px solid #e7e7e2;background:#fff}
.broo-menu-panel[hidden]{display:none!important}
.broo-menu-panel nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 24px}
.broo-menu-panel nav a{display:flex;align-items:center;min-height:48px;padding:10px 0;border-bottom:1px solid #eeeeea;font-size:15px;font-weight:700}
.broo-panel-search{display:none;margin-bottom:16px}.broo-panel-join{margin-top:20px;width:fit-content}
.broo-home-grid{display:grid!important;grid-template-columns:minmax(0,1fr) 320px;gap:28px!important;padding:28px 24px 40px!important}
.broo-main{min-width:0}.broo-sidebar{display:flex!important;flex-direction:column;gap:24px;columns:auto!important;min-width:0}
.broo-sidebar>section{margin:0!important;min-width:0}
.broo-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:24px!important}
.broo-hero-media{min-height:320px!important;max-height:640px}
.broo-hero-copy h1{font-size:clamp(30px,3.3vw,54px)!important;max-width:none!important;overflow-wrap:break-word}
.broo-hero-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:0!important}
.broo-hero-actions a{display:flex!important;gap:8px!important;align-items:center;justify-content:center;padding:14px 6px!important;font-size:13px;font-weight:700;min-height:48px;min-width:0}
.broo-hero-actions svg{width:20px;height:20px;flex:none}
.broo-reading-rail{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px!important;overflow:visible!important}
.broo-reading-rail article{min-width:0!important;flex:none!important;align-items:flex-start!important}
.broo-reading-rail article>div:first-child{width:60px!important;flex-basis:60px!important}
.broo-reading-rail h3{overflow-wrap:break-word}
.broo-tv a,.broo-audio a{display:flex!important;align-items:center;gap:10px;min-height:44px}
.broo-tv a svg,.broo-audio a svg{width:20px;height:20px;flex:none}
@media(max-width:1439px){.broo-header-nav{display:none}.broo-menu-toggle{display:flex}.broo-header-search{max-width:520px}.broo-header-row{gap:24px}.broo-header-actions{gap:8px}}
@media(max-width:1199px){.broo-home-grid{grid-template-columns:minmax(0,1fr)}.broo-sidebar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px}.broo-hero-copy h1{font-size:clamp(30px,4vw,46px)!important}.broo-sidebar>section:last-child{grid-column:auto}}
@media(max-width:850px){.broo-header-join{display:none}.broo-header-row{gap:20px}.broo-header-search{max-width:none}.broo-reading-rail{grid-template-columns:1fr!important}.broo-reading-rail article{align-items:center!important}.broo-reading-rail article>div:first-child{width:76px!important;flex-basis:76px!important}.broo-hero-actions a{font-size:12px;gap:6px!important}.broo-hero-media{min-height:300px!important}}
@media(max-width:650px){.broo-header-row{min-height:68px;padding:12px 20px;gap:12px}.broo-header-search{display:none}.broo-header-actions{margin-left:auto;gap:2px}.broo-search-toggle{display:flex}.broo-panel-search{display:flex}.broo-menu-panel{padding:16px 20px 24px}.broo-menu-panel nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.broo-home-grid{padding:20px!important;gap:28px!important}.broo-hero{grid-template-columns:minmax(0,1fr)!important;gap:20px!important;direction:ltr!important}.broo-hero-media{min-height:0!important;height:auto!important;aspect-ratio:4/3;grid-row:2}.broo-hero-copy h1{font-size:clamp(30px,7.5vw,42px)!important}.broo-sidebar{grid-template-columns:minmax(0,1fr)}.broo-hero-actions a{font-size:12px}.broo-hero-actions svg{width:18px;height:18px}.broo-main{gap:28px!important}}

/* Single v4: shared Home navigation/footer, optional editorial regions. */
*{box-sizing:border-box}
.broo-single{max-width:1320px;margin:auto;padding:28px 28px 64px;display:flex;flex-direction:column;gap:28px}
.broo-single-hero{gap:36px!important}
.broo-single-hero h1{line-height:1.08!important}
.broo-single-hero p{font-weight:400!important;font-size:17px!important;line-height:1.65!important}
.broo-single-meta{font-size:12px;line-height:1.6;color:#62625a}
.broo-single-media img{display:block;width:100%;height:100%;object-fit:cover}
.broo-single-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px!important;border:1px solid #e7e7e2;border-radius:12px;padding:8px}
.broo-single-actions>a{display:flex;align-items:center;gap:12px;padding:12px 18px;font-size:14px;min-height:48px}
.broo-single-actions>a:first-child{background:#f4fbd0;border-radius:8px}
.broo-single-grid{display:grid;grid-template-columns:minmax(0,740px) minmax(230px,300px);justify-content:center;gap:clamp(32px,5vw,72px);align-items:start;padding-top:12px}
.broo-single-body{min-width:0;scroll-margin-top:24px}
.broo-single-body>p{margin:0 0 24px;font-size:18px;line-height:1.75;letter-spacing:-.005em;color:#30302c;overflow-wrap:break-word}
.broo-single-sources{display:block;border-top:1px solid #e7e7e2;padding-top:24px;font-size:14px;text-decoration:underline;text-underline-offset:4px}
.broo-single-related{display:flex;flex-direction:column;gap:20px;min-width:0;border-top:1px solid #e7e7e2;padding-top:20px}
.broo-single-related h2{font-size:18px;line-height:1.3;letter-spacing:-.02em;margin:0;font-weight:700}
.broo-single-related>a{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.45;font-weight:700}
.broo-single-related img{width:80px;height:64px;object-fit:cover;border-radius:6px;flex:0 0 80px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #65655a;outline-offset:4px}
@media(max-width:1000px){.broo-single-grid{grid-template-columns:minmax(0,740px)}.broo-single-related{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.broo-single-related h2{grid-column:1/-1}}
@media(max-width:650px){.broo-single{padding:24px 20px 40px;gap:24px}.broo-single-hero{gap:24px!important}.broo-single-hero h1{font-size:clamp(29px,7.9vw,39px)!important}.broo-single-body>p{font-size:17px;line-height:1.7}.broo-single-related{grid-template-columns:1fr}.broo-single-actions>a{padding:10px 12px}}
/* Actions stay together; related stories collapse below reading on tablet. */
.broo-single-actions{justify-content:space-between;gap:8px!important}
.single-action-secondary{display:flex;align-items:center;gap:4px}
.single-action-secondary button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 18px;border:0;background:transparent;border-radius:8px;font:700 14px Satoshi,system-ui;cursor:pointer;color:#242420}
.single-action-secondary button:hover{background:#f4f4ef}
.single-action-secondary svg{width:20px;height:20px;flex:none}
.broo-single-related{gap:0;border:0;padding:0}
.single-related-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:18px;border-bottom:1px solid #e7e7e2}
.single-related-heading>a{font-size:12px;font-weight:700;white-space:nowrap}
.broo-single-related>.single-related-card{padding:20px 0;border-bottom:1px solid #e7e7e2;gap:14px}
.single-related-label{display:block;font-size:11px;color:#76766d;font-weight:500;line-height:1.4;margin-bottom:6px}
.single-related-card strong{font-size:15px;line-height:1.4;display:block;font-weight:700;letter-spacing:-.015em}
.single-related-card:hover strong{text-decoration:underline;text-underline-offset:3px}
.broo-single-related>.single-sponsor{display:flex;flex-direction:column;gap:18px;margin-top:28px;padding:24px;background:#f4f4ef;border:1px solid #e7e7e2;border-radius:12px}
.single-sponsor>span:first-child{font-size:10px;letter-spacing:.12em;color:#6a6a60}
.single-sponsor strong{font-size:25px;line-height:1.16;letter-spacing:-.035em;font-weight:700}
.single-sponsor>span:last-child{display:flex;align-items:center;gap:10px;font-size:13px}
.single-sponsor svg{width:18px;height:18px}
.single-dialog{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-height:85vh;overflow:auto;border:1px solid #e7e7e2;border-radius:16px;padding:32px;color:#151512;background:#fff;box-shadow:0 24px 80px #0002;font-family:Satoshi,system-ui}
.single-dialog::backdrop{background:#15151266;backdrop-filter:blur(3px)}
.single-dialog-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:transparent;font-size:28px;cursor:pointer;border-radius:50%}
.single-dialog h2{margin:12px 0;font-size:26px;line-height:1.2;letter-spacing:-.025em}
.single-dialog p{font-size:15px;line-height:1.6;color:#63635b}
.single-eyebrow{font-size:10px;letter-spacing:.12em;font-weight:700;color:#74746b}
.single-primary{display:block;background:#151512;color:white!important;text-align:center;padding:14px;border-radius:8px;font-weight:700;margin-top:24px}
.single-dialog-link{display:block;text-align:center;font-size:13px;margin-top:16px}
.single-share-links{display:flex;gap:12px;margin:22px 0}
.single-share-links>a{flex:1;padding:12px;border:1px solid #ddd;border-radius:8px;text-align:center;font-size:14px}
.single-dialog label{display:block;font-size:12px;margin:16px 0 8px}
.single-copy-row{display:flex;gap:8px}
.single-copy-row input{width:0;min-width:0;flex:1;padding:12px;border:1px solid #ddd;border-radius:6px;font:12px Satoshi,system-ui}
.single-copy-row button{border:0;border-radius:6px;background:#d7ff4f;padding:12px;font:700 12px Satoshi,system-ui;cursor:pointer}
#single-share-status{font-size:12px;min-height:20px;margin-bottom:0}
@media(max-width:1000px){.broo-single-related{column-gap:24px}.single-related-heading{grid-column:1/-1}.broo-single-related>.single-sponsor{margin-top:16px}}
@media(max-width:650px){.single-action-secondary button{padding:12px 10px;font-size:13px;gap:6px}.broo-single-actions>a:first-child{padding:10px}.broo-single-actions>a:first-child svg{width:20px}.single-dialog{padding:28px 22px}.broo-single-related>.single-sponsor{margin-top:24px}}
/* Reading rhythm: one alignment for hero, actions, text and sidebar. */
.broo-single{max-width:1240px;padding:24px 32px 64px;gap:24px}
.broo-single-hero{gap:40px!important}
.broo-single-grid{grid-template-columns:minmax(0,1fr) 300px;justify-content:stretch;gap:56px;padding-top:16px}
.broo-single-body{max-width:720px}
.broo-single-body>p{margin-bottom:22px;line-height:1.7}
.broo-single-actions{margin-top:4px}
.broo-single-sources{margin-top:32px;padding-top:22px}
@media(max-width:1000px){.broo-single{padding-inline:28px}.broo-single-grid{grid-template-columns:minmax(0,1fr);gap:40px}.broo-single-body{max-width:720px;margin-inline:auto}.broo-single-related{border-top:1px solid #e7e7e2;padding-top:28px}}
@media(max-width:650px){.broo-single{padding:20px 20px 40px;gap:22px}.broo-single-grid{padding-top:4px;gap:32px}.broo-single-body>p{margin-bottom:20px}.broo-single-hero{gap:24px!important}.single-related-heading{padding-bottom:14px}.broo-single-related>.single-related-card{padding-block:16px}}
.single-toc{display:grid;gap:12px;background:#f6f6f3;border:1px solid #e7e7e2;border-radius:12px;padding:22px 24px;margin:0 0 32px}
.single-toc strong{font-size:14px;margin-bottom:4px}
.single-toc a{font-size:14px;line-height:1.45;color:#54544b;text-decoration:underline;text-decoration-color:#d0d0c5;text-underline-offset:4px}
.single-toc a:hover{color:#151512}
.broo-single-body>h2{font-size:26px;font-weight:700;line-height:1.25;letter-spacing:-.025em;margin:36px 0 16px;scroll-margin-top:28px}
.single-toc+h2{margin-top:0}
@media(max-width:650px){.single-toc{padding:20px;margin-bottom:28px}.broo-single-body>h2{font-size:23px;margin-top:30px;margin-bottom:14px}}
/* Original Claude Design composition restored; only responsive containment. */
.broo-single-grid{display:flex;gap:28px;padding-top:0}
.broo-single-body{margin:0!important;max-width:760px}
.broo-single-body>p{margin:0;line-height:1.62}
.broo-single-body section{scroll-margin-top:24px}
.single-original-left{min-width:0}
.single-original-right img{width:100%;height:100%;object-fit:cover;display:block}
.single-original-right{min-width:0}
.single-listen{margin-right:auto}
@media(min-width:1200px){.single-original-left{flex:0 0 220px!important}.single-original-right{flex:0 0 260px!important}.broo-single-body{flex:1 1 0!important}}
@media(max-width:1199px){.single-original-left{position:static!important;flex:0 0 220px!important}.broo-single-body{flex:1 1 440px!important}.single-original-right{flex-basis:100%!important}}
@media(max-width:760px){.single-original-left{flex-basis:100%!important;max-width:none!important;display:grid!important;grid-template-columns:1fr}.single-original-left>section:last-child{order:2}.broo-single-body{flex-basis:100%!important}.single-original-right{grid-template-columns:1fr!important}.broo-single{padding:20px!important}.single-listen{margin-right:0}}


  body { margin: 0; background: #FFFFFF; font-family: "Satoshi", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  a { color: #0A0A0A; text-decoration: none; }
  a:hover { color: #666666; }

/* Mobile reading rhythm and touch targets, September 2026. */
@media(max-width:760px){
.broo-header-row{padding-inline:16px!important;gap:8px!important}
.broo-header-logo img{max-width:82px;height:auto!important}
.broo-header-actions{gap:0!important}
.broo-icon-button{width:44px;height:44px;flex-basis:44px}
.broo-footer-main{padding-inline:20px}
input,select,textarea{font-size:16px!important}
}
@media(max-width:359px){.broo-header-logo img{max-width:68px}.broo-header-logo{gap:5px!important}.broo-header-row{padding-inline:12px!important}}

#single-audio img[alt="Broo"]{filter:invert(1)}
@media(max-width:760px){
.broo-single{padding:20px 16px 36px!important}
.broo-single-grid{gap:24px!important}
.single-original-left{display:contents!important}
.single-original-left>section{flex:0 0 100%;width:100%;order:1}
.broo-single-body{order:2!important;width:100%;max-width:100%;font-size:17px;line-height:1.7}
#single-audio{order:3!important;scroll-margin-top:20px}
#single-audio>div:has(>img:not([alt="Broo"])){display:none!important}
.single-original-right{order:4!important;width:100%}
.broo-single-body p,.broo-single-body li{overflow-wrap:anywhere}
.broo-single-body table{display:block;max-width:100%;overflow-x:auto}
.single-action-secondary{width:100%;display:flex;gap:8px}
.single-action-secondary>a,.single-action-secondary>button{flex:1;justify-content:center;min-height:44px}
}