/* BroBot bowl theme. Colors sampled from the dossier portrait. CSS only, no libraries. */
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@400;600;700&family=Courier+Prime:wght@700&display=swap');
:root{--a:#dead3a;--b:#f3dfaf;--c:#4bb487;--bg1:#161606;--bg2:#3b3b11;--ink:#f6f3ee;--dim:rgba(246,243,238,.72);--edge:rgba(255,255,255,.16);--r:clamp(16px,1.2vw,34px);--wrap:min(100vw - 2rem,86rem)}
*{box-sizing:border-box}
html{background:var(--bg1);font-size:clamp(16px,.5vw + 10px,32px);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font:1rem/1.6 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;background:radial-gradient(140% 80% at 50% -10%,var(--bg2),var(--bg1) 70%);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(40% 35% at 15% 25%,color-mix(in srgb,var(--a) 28%,transparent),transparent 70%),radial-gradient(35% 40% at 85% 75%,color-mix(in srgb,var(--c) 22%,transparent),transparent 70%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/2rem 2rem,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/2rem 2rem}
.nw{white-space:nowrap}
a{color:var(--b);text-underline-offset:.2em}
a:hover{color:#fff}
.wrap{width:var(--wrap);margin-inline:auto}
.bb-note{margin:0;padding:.7rem 1rem;text-align:center;font:700 .82rem/1.45 'Courier Prime',ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--bg1);background:linear-gradient(90deg,var(--a),var(--b),var(--c))}
.bb-note a{color:var(--bg1);font-weight:700}
.hero{display:grid;gap:clamp(1.25rem,3vw,3rem);align-items:center;padding:clamp(1.25rem,3vw,3rem) 0 clamp(1rem,2vw,2rem)}
@media(min-width:900px){.hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.portrait{margin:0;position:relative;justify-self:center;width:fit-content;max-width:100%;border-radius:calc(var(--r) + 8px);overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--edge),0 2rem 5rem -1.5rem color-mix(in srgb,var(--a) 55%,transparent)}
.portrait img{display:block;width:auto;max-width:100%;height:auto;max-height:78vh}
.portrait figcaption{position:absolute;left:.75rem;bottom:.75rem;margin:0;padding:.3rem .8rem;border-radius:999px;background:rgba(0,0,0,.6);font-size:.78rem;color:#fff}
.stamp{margin:0 0 .6rem;font:700 .8rem/1.4 'Courier Prime',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--b)}
h1{--L:10;margin:0;font-family:'Archivo Black',Impact,'Arial Black',sans-serif;font-weight:400;line-height:1.02;letter-spacing:-.015em;font-size:clamp(1.9rem,calc((min(var(--wrap),100vw - 2rem) - 1rem) / (var(--L) * .7)),6.5rem);background:linear-gradient(100deg,#fff 10%,var(--b) 40%,var(--a) 70%,var(--c));-webkit-background-clip:text;background-clip:text;color:transparent}
@media(min-width:900px){h1{font-size:clamp(2.4rem,calc(min(var(--wrap),100vw - 2rem) * .56 / (var(--L) * .7)),7.5rem)}}
.tagline{margin:1rem 0 .5rem;font-size:clamp(1.15rem,1rem + 1vw,2rem);line-height:1.35;max-width:32ch}
.tagline q{quotes:"“" "”"}
.meta{margin:.25rem 0;color:var(--dim);font-size:.9rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.3rem;border-radius:999px;font-weight:700;text-decoration:none;color:var(--bg1);background:linear-gradient(120deg,var(--a),var(--b));box-shadow:0 .5rem 1.5rem -.5rem var(--a)}
.btn.ghost{color:var(--ink);background:transparent;box-shadow:inset 0 0 0 2px var(--edge)}
.btn:hover{color:var(--bg1);filter:brightness(1.08)}.btn.ghost:hover{color:#fff;box-shadow:inset 0 0 0 2px var(--b)}
main.wrap{display:grid;align-items:start;gap:clamp(1rem,1.6vw,2rem);grid-template-columns:minmax(0,1fr);padding-bottom:3rem}
main>*{min-width:0}
@media(min-width:900px){main.wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}main>.full{grid-column:1/-1}}
main>section{position:relative;border-radius:var(--r);padding:clamp(1.1rem,1.6vw,2.2rem);background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid var(--edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1.2rem 2.5rem -1.2rem rgba(0,0,0,.7)}
h2{margin:0 0 .8rem;font:700 .82rem/1.3 'Courier Prime',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--b)}
h3{margin:0 0 .4rem;font-family:'Archivo Black',Impact,sans-serif;font-weight:400;font-size:clamp(1.15rem,1rem + .5vw,1.7rem);line-height:1.15}
.quote{margin:0;font-size:1.05rem;line-height:1.6}
.ln{display:block}.ln+.ln{margin-top:.45em}.quote+.quote{margin-top:.6em}
.ln b{color:var(--b)}
.src{margin:.8rem 0 0;color:var(--dim);font-size:.82rem}
.post{border-radius:calc(var(--r) - 4px);padding:clamp(1rem,1.4vw,1.8rem);margin:0 0 1rem;background:rgba(0,0,0,.25);border:1px solid var(--edge)}
.post-date,.feed-meta,.board-meta{color:var(--dim);font-size:.85rem;margin:.2rem 0 .6rem}
.feed-grid{display:grid;gap:1rem}@media(min-width:900px){.feed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.gear{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.gear li{padding:.75rem .9rem;border-radius:12px;background:color-mix(in srgb,var(--a) 10%,transparent);border-left:4px solid var(--a)}
.gear b{display:block;color:var(--b)}
.board-note{margin:0;font-size:1.05rem;padding:1rem;border-radius:12px;background:color-mix(in srgb,var(--b) 12%,transparent);border-left:4px solid var(--b)}
.bowl-foot{text-align:center;padding:1rem 0 4rem;color:var(--dim)}
.bowl-foot p{margin:.4rem 0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--c);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}