/* brewOS — brewos.co
Paper #FCFCFB · Ink #1B1A18 · Graphite #34373A · Copper #C5792A (punctuation, never paint)
Instrument Serif display · Inter body. Mobile first. */
:root{
--paper:#FCFCFB;
--ink:#1B1A18;
--graphite:#34373A;
--copper:#C5792A;
--rule:rgba(27,26,24,0.12);
--rule-soft:rgba(27,26,24,0.07);
--muted:rgba(27,26,24,0.56);
--gutter:20px;
--max:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
background:var(--paper);
color:var(--ink);
font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
font-size:17px;
line-height:1.62;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* height:auto is load-bearing: the width/height attributes on each ![]()
are
there to reserve space and stop layout shift, but without this the browser
honours the height attribute while constraining the width, and every photo
gets stretched vertically. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:"Instrument Serif",Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-0.004em;margin:0}
p{margin:0 0 1.05em 0}
p:last-child{margin-bottom:0}
/* ---------- shell ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
/* A guard, paid for twice. Nesting a .wrap inside a .wrap doubles the gutter and
silently puts that block on a different left edge from everything around it —
it cost a squashed mobile menu once and a screenshot rendered at 88% of its
width once. An inner wrap is now inert, so the mistake stops mattering. */
.wrap .wrap{max-width:none;padding-left:0;padding-right:0}
.narrow{max-width:720px}
.measure{max-width:660px} /* the reading column — running text never changes width */
/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(252,252,251,0.96);backdrop-filter:saturate(1.2) blur(8px);z-index:40}
/* The child combinator is load-bearing. As a descendant selector this also caught
the drawer's own .wrap — the drawer sits inside