/* ============================================================
MONSERRO — Independent media company
Editorial static site · shared stylesheet
============================================================ */
/* ---------- Tokens ---------- */
:root{
--paper:#EDEBE4; /* warm bone */
--ink:#0B0B0B; /* near black */
--muted:#8B8578; /* warm grey */
--line:#CFC9BC; /* hairline on paper */
--signal:#F03A17; /* ember — used sparingly */
/* role tokens (flipped inside .invert) */
--bg:var(--paper);
--fg:var(--ink);
--hair:var(--line);
--dim:var(--muted);
--maxw:1600px;
--pad:clamp(18px,4.4vw,72px);
--grain:.05;
--serif:"Times New Roman",Times,"Iowan Old Style",Georgia,serif;
--sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
--mono:"SFMono-Regular",ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace;
}
.invert{
--bg:#0B0B0B;
--fg:#EDEBE4;
--hair:#2A2A28;
--dim:#8F897E;
--grain:.08;
background:var(--bg);
color:var(--fg);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
background:var(--paper);
color:var(--ink);
font-family:var(--sans);
font-size:16px;line-height:1.5;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--signal);color:#fff}
/* ---------- Utilities ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.section{background:var(--bg);color:var(--fg);position:relative}
.pad-y{padding-top:clamp(56px,10vh,140px);padding-bottom:clamp(56px,10vh,140px)}
.serif{font-family:var(--serif)}
.mono{font-family:var(--mono)}
.kicker{font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim);font-weight:500}
.reg{font-family:var(--sans);vertical-align:super;font-size:.32em;letter-spacing:0;color:var(--signal)}
.hr{height:1px;background:var(--hair);border:0;width:100%}
/* Reveals are progressive enhancement: hidden state only applies once JS
adds .reveal-ready to . If JS fails, all content stays visible. */
html.reveal-ready .reveal{opacity:0;transform:translateY(26px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
html.reveal-ready .reveal.is-in{opacity:1;transform:none}
/* Blocks the editor has marked as deleted (applied server-side on public pages) */
.mns-hidden{display:none !important}
/* ---------- Grain overlay ---------- */
.grain{position:relative}
.grain::after{
content:"";position:absolute;inset:0;pointer-events:none;z-index:2;mix-blend-mode:overlay;opacity:var(--grain);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* ---------- Cinematic plates (image placeholders) ----------
Replace .plate blocks with ![]()
/