/* ========================================================================== pslove mash layer — document core, Blood skin (approved via /mash-0717). Loaded LAST in each page's so it wins the cascade. Namespaced masthead/footer classes; light overrides for stamps, refusals, headings. Wired 18 Jul 2026; deploys with the Sunday coordinated push. ========================================================================== */ :root { --m-accent: #E8432C; --m-accent-deep: #C93A22; --m-navy: #23416B; --m-mustard: #F2B33D; --m-cream: #FFF3E6; --m-cream-dim: rgba(255, 243, 230, .85); --m-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E"); } /* paper grain everywhere; navy display headings (document core keeps its type scale) */ body { background: #FBF1E5 var(--m-grain); } h2, h3 { color: var(--m-navy); } /* ---- masthead ---- */ header.mast { position: relative; background: var(--m-accent) var(--m-grain); padding: 20px 0 0; border-bottom: none; } .mast .m-in { max-width: 1180px; margin: 0 auto; padding: 0 28px; } .mast .m-row { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: baseline; justify-content: space-between; } .mast .m-eyebrow { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--m-cream-dim); margin: 0; } .mast nav.m-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: .85rem; } .mast nav.m-nav a { color: var(--m-cream-dim); text-decoration: none; font-weight: 600; } .mast nav.m-nav a:hover { color: var(--m-cream); text-decoration: none; } .mast nav.m-nav .newtag { font-family: 'JetBrains Mono', ui-monospace, monospace; font-style: normal; font-weight: 700; font-size: .52rem; letter-spacing: .1em; text-transform: uppercase; color: var(--m-navy); background: var(--m-mustard); border-radius: 4px; padding: 1px 5px; margin-left: 5px; vertical-align: super; } .mast nav.m-nav a.cur { color: var(--m-cream); font-weight: 700; padding-bottom: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='7'%3E%3Cpath d='M2 4.5 C 30 1.5 55 6 80 3.5 S 120 5 138 2.5' fill='none' stroke='%23F2B33D' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 7px; } .mast h1 { font-family: 'Poppins', 'Archivo', sans-serif; font-style: italic; font-weight: 800; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.04; letter-spacing: -.015em; color: var(--m-cream); margin: 20px 0 0; } .mast .m-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 20px; } .mast .m-title-row h1 { margin: 0; } .mast .ver-chip2 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; background: var(--m-mustard); color: var(--m-navy); padding: 4px 9px; border-radius: 4px; line-height: 1; white-space: nowrap; } .mast .m-by { color: var(--m-cream-dim); font-size: .86rem; margin: 12px 0 0; padding-bottom: 30px; } .mast .m-by b { color: var(--m-cream); font-weight: 700; } .mast .m-meta { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; letter-spacing: .02em; line-height: 1.7; color: var(--m-cream-dim); margin: 12px 0 0; padding-bottom: 28px; } .mast .m-meta b { color: var(--m-cream); font-weight: 600; } .m-wave { display: block; width: 100%; height: 44px; margin-top: -1px; } /* ---- verdict stamps: full borders, Poppins italic caps (single-edge strips retired) ---- */ .v { display: inline-block; border: 2.5px solid currentColor; border-radius: 7px; padding: 2px 9px; background: rgba(255, 254, 251, .92); font-family: 'Poppins', sans-serif !important; font-style: italic; font-weight: 800 !important; font-size: .6rem !important; letter-spacing: .09em !important; text-transform: uppercase; } /* refusal blocks: full border replaces the old 3px left strip */ .rf { border: 2px solid rgba(232, 67, 44, .55) !important; border-radius: 10px !important; background: #FFFDF6 !important; } .rf.warn { border-color: rgba(176, 100, 28, .5) !important; } /* os creative-gate badge as a mustard stamp */ .live-badge { display: inline-block; border: 2.5px solid var(--m-navy) !important; border-radius: 7px; padding: 2px 9px; background: var(--m-mustard) !important; color: var(--m-navy) !important; font-family: 'Poppins', sans-serif !important; font-style: italic; font-weight: 800 !important; font-size: .6rem !important; letter-spacing: .09em !important; } /* os workflow-1 runs-link + dated tag */ .wf-runs-link { margin: 10px 0 0; font-size: .9rem; } .wf-runs-link a { color: var(--m-accent); font-weight: 600; } .upd-tag { display: inline-block; margin-left: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8B776C; background: #F8E5CE; border-radius: 999px; padding: 3px 10px; } /* portfolio thesis highlight goes mustard */ .hero .thesis .mark { background: var(--m-mustard) !important; color: var(--m-navy) !important; } /* ---- navy footer (CSS-only: markup and copy untouched) ---- */ footer.page { background: var(--m-navy) var(--m-grain) !important; color: #F6E7D6 !important; border-top: none !important; } footer.page a { color: rgba(246, 231, 214, .9) !important; text-decoration-color: rgba(246, 231, 214, .4) !important; } footer.page a:hover { color: var(--m-mustard) !important; text-decoration-color: var(--m-mustard) !important; } footer.page .scope-line { color: rgba(246, 231, 214, .7) !important; border-color: rgba(246, 231, 214, .25) !important; } @media (max-width: 680px) { .mast nav.m-nav { gap: 8px 16px; font-size: .8rem; } .mast h1 { font-size: 1.85rem; } .m-wave { height: 30px; } } @media print { header.mast { background: #fff; } .mast h1, .mast .m-by, .mast .m-eyebrow { color: #1B1210; } .m-wave { display: none; } } /* ========================================================================== v2 adds (OS page, approved 18 Jul): masthead stats, sticky subnav, audit summary card, role tickets, runs-today tag. ========================================================================== */ .m-stats { margin: 14px 0 0; padding: 0 0 28px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .72rem; letter-spacing: .06em; color: var(--m-cream-dim); } .m-stats b { color: var(--m-cream); font-weight: 600; margin-right: 5px; } .m-stats .one b { color: var(--m-mustard); } .mast .m-by { padding-bottom: 0; } .subnav { position: sticky; top: 0; z-index: 30; background: rgba(251, 241, 229, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(35, 65, 107, .16); } .subnav .subwrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .subnav .subwrap::-webkit-scrollbar { display: none; } .subnav a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #8B776C; text-decoration: none; padding: 12px 12px 10px; white-space: nowrap; border-bottom: 2.5px solid transparent; } .subnav a:hover { color: var(--m-navy); } .subnav a.on { color: var(--m-accent-deep); border-bottom-color: var(--m-accent); } .subnav a .n { color: var(--m-accent-deep); margin-right: 6px; font-weight: 600; } section[id] { scroll-margin-top: 58px; } .sumwrap { max-width: 1180px; margin: 26px auto 0; padding: 0 28px; display: flex; justify-content: flex-end; } .sumcard { flex: 0 1 380px; transform: rotate(-.8deg); background: #FFFDF6; border: 1.5px solid rgba(35, 65, 107, .32); border-radius: 12px; padding: 18px 22px 16px; box-shadow: 0 3px 0 rgba(60, 32, 20, .07); } .sum-stamp { display: inline-block; transform: rotate(-2deg); border: 2.5px solid var(--m-accent-deep); border-radius: 7px; color: var(--m-accent-deep); background: rgba(255, 254, 251, .92); font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 800; font-size: .6rem; letter-spacing: .1em; padding: 2px 9px; } .sum-rows { display: grid; grid-template-columns: 44px 1fr; gap: 6px 14px; margin-top: 14px; font-size: .86rem; color: #1B1210; } .sum-rows b { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; text-align: right; font-size: .95rem; color: var(--m-navy); } .sum-rows b.am { color: #B0641C; } .sum-rows b.gr { color: #1F6B4A; } .sum-rows b.rd { color: var(--m-accent-deep); } .sum-rows span { padding-bottom: 6px; border-bottom: 1px dotted rgba(35, 65, 107, .16); } .sum-rows span.rd { color: var(--m-accent-deep); font-weight: 600; } .sum-rows span:last-of-type { border-bottom: 0; } .sum-foot { margin-top: 12px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .66rem; color: #8B776C; letter-spacing: .04em; } .runs-today { display: block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: .56rem; letter-spacing: .14em; color: var(--m-accent-deep); margin-top: 3px; text-transform: uppercase; } .rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin: 22px 0 6px; } .rt { position: relative; display: flex; background: #FFFDF6; border: 1.5px solid rgba(35, 65, 107, .32); border-radius: 12px; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .rt:hover { transform: translateY(-3px); box-shadow: 0 7px 0 rgba(60, 32, 20, .06); border-color: rgba(35, 65, 107, .5); } .rt::before, .rt::after { content: ""; position: absolute; left: 33px; width: 13px; height: 13px; border-radius: 50%; background: #FBF1E5; border: 1.5px solid rgba(35, 65, 107, .32); z-index: 2; } .rt::before { top: -8px; } .rt::after { bottom: -8px; } .rt-stub { flex: 0 0 40px; display: flex; align-items: center; justify-content: center; border-right: 1.5px dashed rgba(35, 65, 107, .32); border-radius: 12px 0 0 12px; padding: 14px 0; writing-mode: vertical-rl; transform: rotate(180deg); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .58rem; letter-spacing: .16em; color: rgba(35, 65, 107, .7); white-space: nowrap; } .rt-body { flex: 1; display: flex; flex-direction: column; padding: 14px 16px 12px; } .rt-body b { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 700; font-size: 1rem; color: var(--m-navy); line-height: 1.3; } .rt-score { margin-top: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; color: #3A2C27; } .rt-score i { font-style: normal; font-weight: 600; color: var(--m-navy); } .rt-score i.a { color: #B0641C; } .rt-score i.h { color: #1F6B4A; } .rt-hot { border: 2px solid var(--m-accent); } .rt-hot .rt-stub { border-right-color: rgba(232, 67, 44, .45); color: var(--m-accent-deep); } .rt-hot::before, .rt-hot::after { border-color: var(--m-accent); } .rt-note { margin: 0 0 4px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; color: #8B776C; } /* order of attack — horizontal numbered flow */ .oa { border: 1.5px dashed rgba(35, 65, 107, .35); border-radius: 12px; padding: 20px 24px 16px; } .oa-title { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 700; font-size: 1.06rem; color: var(--m-navy); margin: 0; } .oa-flow { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 6px; align-items: center; font-size: .9rem; color: #1B1210; } .oa-flow li { display: flex; align-items: center; gap: 9px; } .oa-flow li + li::before { content: "\2192"; color: var(--m-accent-deep); font-family: 'JetBrains Mono', ui-monospace, monospace; margin-right: 6px; } .oa-n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--m-accent-deep); color: #FBF1E5; font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 800; font-size: .76rem; display: inline-grid; place-items: center; } .oa-p { margin: 16px 0 0; font-size: .88rem; color: #3A2C27; max-width: 82ch; } .oa-foot { margin: 12px 0 0; padding-top: 10px; border-top: 1px dotted rgba(35, 65, 107, .16); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .68rem; color: #8B776C; letter-spacing: .02em; } /* ========================================================================== OS relift-lite (approved 19 Jul from the osv2 screenshots): § headers, system-map card with drop icons, method + foundations accordions, run-weekly ledger. ========================================================================== */ .heading .h2drop { width: 15px; height: 19px; margin-right: 12px; vertical-align: -1px; } .heading .right.rmono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; letter-spacing: .04em; color: #8B776C; text-transform: lowercase; } .sec-rule { height: 2px; background: rgba(35, 65, 107, .16); margin: 14px 0 22px; position: relative; } .sec-rule::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 72px; background: var(--m-accent); } /* system map as a card with drop icons */ .mapcard { background: #FFFDF6; border: 1.5px solid rgba(35, 65, 107, .30); border-radius: 14px; padding: 10px 22px 16px; box-shadow: 0 2px 14px rgba(35, 65, 107, .06); overflow-x: auto; } .mapcard .dot { display: inline-block; width: 13px; height: 16px; border: none !important; border-radius: 0 !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M8 1 C6 5.5 2 8.5 2 12.5 a6 6 0 0 0 12 0 C14 8.5 10 5.5 8 1 Z' fill='%23E8432C'/%3E%3C/svg%3E") center / contain no-repeat !important; box-shadow: none !important; } .mapcard table { width: 100%; border-collapse: collapse; } .mapcard thead th { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 700; font-size: .84rem; color: var(--m-navy); text-align: center; padding: 12px 8px 10px; border-bottom: 2px solid rgba(35, 65, 107, .28); } .mapcard thead th a { color: var(--m-navy); text-decoration: none; } .mapcard tbody th { font-weight: 500; text-align: left; padding: 10px 8px 10px 2px; border-bottom: 1px solid rgba(35, 65, 107, .10); } .mapcard tbody th a { color: #1B1210; text-decoration: none; } .mapcard tbody td { text-align: center; padding: 10px 8px; border-bottom: 1px solid rgba(35, 65, 107, .10); } .mapcard thead th:nth-child(2), .mapcard tbody td:nth-child(2), .mapcard tfoot td:nth-child(2) { background: rgba(232, 67, 44, .055); } .mapcard tfoot th { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #8B776C; text-align: left; padding: 12px 8px 6px 2px; border-top: 2px solid rgba(35, 65, 107, .28); } .mapcard tfoot td { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; color: var(--m-navy); text-align: center; padding: 12px 8px 6px; border-top: 2px solid rgba(35, 65, 107, .28); } .mapcard tfoot td:nth-child(2) { color: var(--m-accent-deep); } /* accordions */ .acc-card { border-radius: 12px; } .acc-card .acc-btn { width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit; color: inherit; } .acc-title { font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 700; font-size: 1.04rem; color: var(--m-navy); } .acc-card .glyph { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid rgba(35, 65, 107, .28); display: grid; place-items: center; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--m-accent-deep); line-height: 1; transition: transform .35s cubic-bezier(.22, .61, .36, 1); } .acc-card.open .glyph { transform: rotate(45deg); } .acc-btn:hover .glyph { border-color: var(--m-accent); background: rgba(232, 67, 44, .06); } .js .acc-body { height: 0; overflow: hidden; transition: height .45s cubic-bezier(.22, .61, .36, 1); } .acc-dashed { border: 1.5px dashed rgba(35, 65, 107, .35) !important; background: transparent !important; padding: 16px 24px 14px !important; } .fnd-acc { padding-bottom: 12px; } .f-title { display: flex; align-items: center; gap: 12px; min-width: 0; } .fnd-idx { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: .62rem; letter-spacing: .1em; color: var(--m-navy); border: 1.5px solid rgba(35, 65, 107, .28); border-radius: 5px; padding: 3px 7px; white-space: nowrap; } .fnd-acc > p { margin-top: 10px; } /* run-weekly ledger */ .ledger { margin-top: 22px; background: #FFFDF6; border: 1.5px solid rgba(35, 65, 107, .30); border-radius: 12px; padding: 8px 24px; box-shadow: 0 2px 14px rgba(35, 65, 107, .05); } .lrow { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid rgba(35, 65, 107, .10); } .lrow:last-child { border-bottom: 0; } .lcad { flex: 0 0 86px; } .lchip { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; border: 1.5px solid currentColor; color: var(--m-navy); line-height: 1.5; } .lchip.red { color: var(--m-accent-deep); } .lname { flex: 0 0 230px; font-family: 'Poppins', sans-serif; font-style: italic; font-weight: 700; font-size: .95rem; color: var(--m-navy); } .lwhat { flex: 1 1 320px; font-size: .86rem; color: #3A2C27; } .tail-note { margin: 20px 0 0; font-size: .87rem; color: #8B776C; max-width: 78ch; } @media (max-width: 640px) { .lname { flex-basis: 100%; } .lcad { flex-basis: auto; } }