/* ===================================================================== Page skin: Applied Case: The Golden Rule Applies only when has .mpe-golden-rule-page. URLs activated in default.hbs: - /p/5ece4d70-4421-4f10-800e-942a396a40db/ - /applied-case-the-golden-rule/ Intent: a legally safe gold/etching/lithograph treatment. CSS-only; images are filtered and crosshatched in-browser, not replaced. ===================================================================== */ html.mpe-golden-rule-page { color-scheme: dark; --gr-black: #070603; --gr-shadow: #130d04; --gr-bronze: #392606; --gr-bronze-2: #5c410f; --gr-gold-deep: #8e6515; --gr-gold: #e6bd42; --gr-gold-bright: #fff0a8; --gr-gold-pale: #fff8d9; --gr-ink: #fff4c6; --gr-muted: #d0b46d; --gr-line: rgba(255, 220, 103, 0.26); --gr-panel: rgba(24, 16, 4, 0.88); --gr-panel-2: rgba(11, 8, 3, 0.92); --gr-panel-border: rgba(255, 222, 113, 0.24); --gr-hatch: rgba(255, 235, 159, 0.10); --gr-pattern-opacity: 0.38; } html.mpe-golden-rule-page[data-color-scheme="light"] { color-scheme: light; --gr-black: #f4db83; --gr-shadow: #d0a734; --gr-bronze: #f7e8af; --gr-bronze-2: #e3bc4b; --gr-gold-deep: #6d4b08; --gr-gold: #9a6b0d; --gr-gold-bright: #c99118; --gr-gold-pale: #fff3be; --gr-ink: #271a04; --gr-muted: #73520e; --gr-line: rgba(100, 70, 8, 0.26); --gr-panel: rgba(255, 246, 204, 0.90); --gr-panel-2: rgba(246, 223, 140, 0.92); --gr-panel-border: rgba(101, 72, 10, 0.30); --gr-hatch: rgba(82, 59, 7, 0.08); --gr-pattern-opacity: 0.30; } /* Keep the Entropy Debt event substrate above article-specific backgrounds. */ html.mpe-golden-rule-page .edw-substrate, html.mpe-golden-rule-page .edw-hole-field { z-index: 2147482000; } html.mpe-golden-rule-page .edw-rollback-flash { z-index: 2147483000; } html.mpe-golden-rule-page, html.mpe-golden-rule-page body { min-height: 100%; } html.mpe-golden-rule-page body { position: relative; overflow-x: hidden; background: var(--gr-black) !important; color: var(--gr-ink); } /* Gold plate foundation. */ html.mpe-golden-rule-page body::before, html.mpe-golden-rule-page body::after { content: ""; position: fixed; inset: 0; pointer-events: none; } html.mpe-golden-rule-page body::before { z-index: 0; background: radial-gradient(circle at 50% 6%, rgba(255, 235, 153, 0.24), transparent 22rem), radial-gradient(circle at 18% 20%, rgba(209, 150, 29, 0.28), transparent 20rem), radial-gradient(circle at 86% 19%, rgba(255, 217, 89, 0.18), transparent 23rem), radial-gradient(circle at 76% 88%, rgba(142, 101, 21, 0.30), transparent 23rem), linear-gradient(180deg, #1b1204 0%, var(--gr-black) 42%, #050403 100%); } html.mpe-golden-rule-page[data-color-scheme="light"] body::before { background: radial-gradient(circle at 50% 5%, rgba(255, 250, 206, 0.72), transparent 22rem), radial-gradient(circle at 16% 20%, rgba(232, 185, 54, 0.34), transparent 23rem), radial-gradient(circle at 88% 19%, rgba(255, 235, 129, 0.36), transparent 24rem), radial-gradient(circle at 76% 88%, rgba(172, 124, 22, 0.22), transparent 24rem), linear-gradient(180deg, #edd16e 0%, var(--gr-black) 46%, #e1b848 100%); } /* Non-infringing engraved-gold field: fine hatching, Guilloche-ish rings, Penrose/Chirality geometry. */ html.mpe-golden-rule-page body::after { z-index: 0; opacity: var(--gr-pattern-opacity); background-image: repeating-linear-gradient(102deg, transparent 0 10px, rgba(255, 246, 185, 0.12) 10px 11px, transparent 11px 18px), repeating-linear-gradient(18deg, transparent 0 13px, rgba(0, 0, 0, 0.24) 13px 14px, transparent 14px 23px), radial-gradient(circle at 9% 18%, transparent 0 3.3rem, rgba(255, 225, 102, 0.45) 3.42rem 3.58rem, transparent 3.72rem), radial-gradient(circle at 93% 25%, transparent 0 5.2rem, rgba(255, 225, 102, 0.30) 5.36rem 5.62rem, transparent 5.8rem), radial-gradient(circle at 8% 79%, transparent 0 4.8rem, rgba(255, 225, 102, 0.26) 4.96rem 5.2rem, transparent 5.42rem), radial-gradient(circle at 94% 83%, transparent 0 3.6rem, rgba(255, 225, 102, 0.36) 3.74rem 3.92rem, transparent 4.06rem), url("../images/penrose-pattern.svg"), linear-gradient(90deg, rgba(130, 88, 12, 0.48), transparent 24%, transparent 76%, rgba(130, 88, 12, 0.48)); background-size: 24rem 24rem, 19rem 19rem, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 34rem auto, 100% 100%; background-position: center, center, center, center, center, center, center top, center; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, no-repeat; mix-blend-mode: screen; filter: sepia(0.35) saturate(1.1) contrast(1.08); } html.mpe-golden-rule-page[data-color-scheme="light"] body::after { mix-blend-mode: multiply; filter: sepia(0.24) saturate(0.95) contrast(0.95); } @media (min-width: 1100px) { html.mpe-golden-rule-page body::after { --gr-center-width: 1040px; --gr-gutter: calc((100vw - var(--gr-center-width)) / 2); -webkit-mask-image: linear-gradient( 90deg, #000 0, #000 calc(var(--gr-gutter) + 2rem), rgba(0, 0, 0, 0.34) calc(var(--gr-gutter) + 8rem), transparent calc(var(--gr-gutter) + 14rem), transparent calc(100% - var(--gr-gutter) - 14rem), rgba(0, 0, 0, 0.34) calc(100% - var(--gr-gutter) - 8rem), #000 calc(100% - var(--gr-gutter) - 2rem), #000 100% ); mask-image: linear-gradient( 90deg, #000 0, #000 calc(var(--gr-gutter) + 2rem), rgba(0, 0, 0, 0.34) calc(var(--gr-gutter) + 8rem), transparent calc(var(--gr-gutter) + 14rem), transparent calc(100% - var(--gr-gutter) - 14rem), rgba(0, 0, 0, 0.34) calc(100% - var(--gr-gutter) - 8rem), #000 calc(100% - var(--gr-gutter) - 2rem), #000 100% ); } } html.mpe-golden-rule-page .gh-site, html.mpe-golden-rule-page .gh-main { position: relative; z-index: 1; background: transparent !important; } html.mpe-golden-rule-page .gh-head { background: linear-gradient(180deg, rgba(18, 12, 3, 0.94), rgba(18, 12, 3, 0.78)) !important; border-bottom: 1px solid rgba(255, 225, 102, 0.16); box-shadow: 0 1px 0 rgba(255, 225, 102, 0.07), 0 20px 70px rgba(0, 0, 0, 0.18); backdrop-filter: blur(7px); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-head { background: linear-gradient(180deg, rgba(255, 245, 199, 0.94), rgba(238, 205, 100, 0.78)) !important; } html.mpe-golden-rule-page body.is-head-stacked .gh-head-menu::before, html.mpe-golden-rule-page body.is-head-stacked .gh-head-menu::after, html.mpe-golden-rule-page .gh-head-inner, html.mpe-golden-rule-page .gh-topic-header, html.mpe-golden-rule-page .gh-topic-footer, html.mpe-golden-rule-page .gh-read-next .gh-pagehead-title::after, html.mpe-golden-rule-page .gh-comments .gh-pagehead-title::after { background-color: var(--gr-line) !important; border-color: var(--gr-line) !important; } html.mpe-golden-rule-page .gh-head a, html.mpe-golden-rule-page .gh-search, html.mpe-golden-rule-page .nav-more-toggle, html.mpe-golden-rule-page .mpe-theme-toggle, html.mpe-golden-rule-page .mpe-profanity-toggle, html.mpe-golden-rule-page .gh-burger { color: var(--gr-gold-pale) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-head a, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-search, html.mpe-golden-rule-page[data-color-scheme="light"] .nav-more-toggle, html.mpe-golden-rule-page[data-color-scheme="light"] .mpe-theme-toggle, html.mpe-golden-rule-page[data-color-scheme="light"] .mpe-profanity-toggle, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-burger { color: #211503 !important; } html.mpe-golden-rule-page .gh-burger::before, html.mpe-golden-rule-page .gh-burger::after { background-color: currentColor !important; } html.mpe-golden-rule-page .edw-event { position: relative; z-index: 4; } html.mpe-golden-rule-page .gh-article { position: relative; isolation: isolate; padding-top: 1rem; } html.mpe-golden-rule-page .gh-article::before { content: ""; position: absolute; z-index: 0; top: -3rem; bottom: -6rem; left: 50%; width: min(calc(100% - var(--gap) * 1.2), 94rem); transform: translateX(-50%); border: 1px solid var(--gr-panel-border); border-radius: 28px; background: repeating-linear-gradient(0deg, transparent 0 13px, rgba(255, 236, 159, 0.045) 13px 14px, transparent 14px 27px), radial-gradient(circle at 50% 0%, rgba(255, 230, 120, 0.13), transparent 24rem), linear-gradient(180deg, var(--gr-panel), var(--gr-panel-2)); box-shadow: 0 0 0 1px rgba(255, 249, 219, 0.03) inset, 0 28px 90px rgba(0, 0, 0, 0.22), 0 0 70px rgba(207, 156, 37, 0.05); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.42) inset, 0 26px 72px rgba(96, 67, 9, 0.14), 0 0 70px rgba(136, 93, 12, 0.06); } html.mpe-golden-rule-page .gh-article > *, html.mpe-golden-rule-page .gh-content > * { position: relative; z-index: 1; } html.mpe-golden-rule-page .gh-article-header { padding-top: 2rem; } html.mpe-golden-rule-page .gh-article-title, html.mpe-golden-rule-page .gh-content h1, html.mpe-golden-rule-page .gh-content h2, html.mpe-golden-rule-page .gh-content h3, html.mpe-golden-rule-page .gh-content h4 { color: var(--gr-gold-bright); text-shadow: 0 1px 0 rgba(255, 249, 211, 0.14), 0 -1px 0 rgba(64, 39, 0, 0.42), 0 3px 18px rgba(0, 0, 0, 0.24), 0 0 26px rgba(255, 220, 84, 0.14); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { html.mpe-golden-rule-page .gh-article-title, html.mpe-golden-rule-page .gh-content h1, html.mpe-golden-rule-page .gh-content h2, html.mpe-golden-rule-page .gh-content h3, html.mpe-golden-rule-page .gh-content h4 { background-image: radial-gradient(circle at 10% 28%, #fff9d6 0 0.07em, transparent 0.08em), radial-gradient(circle at 38% 72%, #d69a24 0 0.05em, transparent 0.06em), radial-gradient(circle at 78% 26%, #fff0a8 0 0.06em, transparent 0.07em), radial-gradient(circle at 92% 78%, #9f6b13 0 0.07em, transparent 0.08em), linear-gradient(112deg, #fff8cf 0%, #ffe78c 22%, #b27b16 45%, #f7c850 66%, #fff1a9 100%); background-size: 0.66em 0.66em, 0.84em 0.84em, 0.92em 0.92em, 1.08em 1.08em, 100% 100%; background-position: 0 0, 0.22em 0.16em, 0.46em 0.04em, 0.18em 0.36em, center; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-title, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content h1, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content h2, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content h3, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content h4 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62), 0 -1px 0 rgba(90, 61, 7, 0.16), 0 2px 10px rgba(97, 65, 6, 0.12); } html.mpe-golden-rule-page .gh-article-excerpt, html.mpe-golden-rule-page .gh-content, html.mpe-golden-rule-page .gh-content p, html.mpe-golden-rule-page .gh-content li { color: var(--gr-ink) !important; } html.mpe-golden-rule-page .gh-article-excerpt { font-size: clamp(2rem, 1.62rem + 0.5vw, 2.55rem); text-shadow: 0 1px 0 rgba(255, 247, 206, 0.08), 0 -1px 0 rgba(0, 0, 0, 0.35), 0 2px 14px rgba(0, 0, 0, 0.30); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-excerpt { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58), 0 -1px 0 rgba(117, 80, 8, 0.10); } html.mpe-golden-rule-page .gh-content { font-size: clamp(1.9rem, 1.72rem + 0.22vw, 2.08rem); line-height: 1.74; text-shadow: 0 1px 0 rgba(255, 245, 190, 0.06), 0 -1px 0 rgba(0, 0, 0, 0.25); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 -1px 0 rgba(102, 70, 8, 0.08); } html.mpe-golden-rule-page .gh-content a:not(.kg-bookmark-container), html.mpe-golden-rule-page .gh-article-tag { color: var(--gr-gold-bright) !important; text-decoration-color: rgba(255, 226, 101, 0.58); text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content a:not(.kg-bookmark-container), html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-tag { color: #745107 !important; text-decoration-color: rgba(116, 81, 7, 0.44); } html.mpe-golden-rule-page .gh-article-meta, html.mpe-golden-rule-page figcaption, html.mpe-golden-rule-page .gh-card-footer, html.mpe-golden-rule-page .gh-copyright { color: var(--gr-muted) !important; } html.mpe-golden-rule-page .gh-content blockquote:not([class]) { border-left-color: var(--gr-gold-bright); background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 236, 159, 0.055) 8px 9px, transparent 9px 17px), linear-gradient(90deg, rgba(255, 218, 75, 0.16), transparent 90%); color: var(--gr-ink); padding-block: 1.15rem; padding-right: 1.2rem; border-radius: 0 12px 12px 0; } html.mpe-golden-rule-page .gh-content hr { background: linear-gradient(90deg, transparent, rgba(255, 225, 102, 0.52), transparent); } html.mpe-golden-rule-page .gh-content :not(pre) > code, html.mpe-golden-rule-page .gh-content pre { border: 1px solid var(--gr-panel-border); background: rgba(0, 0, 0, 0.38); color: var(--gr-gold-pale); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content :not(pre) > code, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content pre { background: rgba(255, 241, 186, 0.82); color: #2e1f04; } /* CSS-only etching treatment for feature and inline images. */ html.mpe-golden-rule-page .gh-article-image, html.mpe-golden-rule-page .gh-content figure.kg-image-card, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card .kg-gallery-image, html.mpe-golden-rule-page .gh-content figure.kg-video-card, html.mpe-golden-rule-page .gh-content figure.kg-embed-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--gr-panel-border); border-radius: 16px; background: linear-gradient(135deg, rgba(255, 235, 150, 0.18), rgba(68, 43, 5, 0.18)), #211605; box-shadow: 0 0 0 1px rgba(255, 245, 195, 0.05) inset, 0 18px 52px rgba(0, 0, 0, 0.24), 0 0 46px rgba(211, 158, 31, 0.06); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-image, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-image-card, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-gallery-card .kg-gallery-image, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-video-card, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-embed-card { background: #edcf6f; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.48) inset, 0 16px 42px rgba(92, 63, 9, 0.16); } html.mpe-golden-rule-page .gh-article-image img, html.mpe-golden-rule-page .gh-content figure.kg-image-card img, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card img { filter: grayscale(1) sepia(0.95) saturate(1.6) hue-rotate(350deg) contrast(1.55) brightness(0.82); mix-blend-mode: luminosity; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-image img, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-image-card img, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-gallery-card img { filter: grayscale(1) sepia(0.8) saturate(1.12) hue-rotate(350deg) contrast(1.42) brightness(1.04); mix-blend-mode: multiply; } html.mpe-golden-rule-page .gh-article-image::before, html.mpe-golden-rule-page .gh-article-image::after, html.mpe-golden-rule-page .gh-content figure.kg-image-card::before, html.mpe-golden-rule-page .gh-content figure.kg-image-card::after, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card .kg-gallery-image::before, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card .kg-gallery-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; } html.mpe-golden-rule-page .gh-article-image::before, html.mpe-golden-rule-page .gh-content figure.kg-image-card::before, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card .kg-gallery-image::before { opacity: 0.42; background: repeating-linear-gradient(16deg, transparent 0 5px, rgba(255, 247, 205, 0.18) 5px 6px, transparent 6px 11px), repeating-linear-gradient(106deg, transparent 0 7px, rgba(0, 0, 0, 0.25) 7px 8px, transparent 8px 15px); mix-blend-mode: overlay; } html.mpe-golden-rule-page .gh-article-image::after, html.mpe-golden-rule-page .gh-content figure.kg-image-card::after, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card .kg-gallery-image::after { opacity: 0.62; background: radial-gradient(circle at 50% 50%, transparent 0 54%, rgba(0, 0, 0, 0.28) 100%), linear-gradient(135deg, rgba(255, 238, 149, 0.20), transparent 38%, rgba(96, 61, 4, 0.25) 100%); mix-blend-mode: soft-light; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-image::before, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-image-card::before, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-gallery-card .kg-gallery-image::before { opacity: 0.34; mix-blend-mode: multiply; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article-image::after, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-image-card::after, html.mpe-golden-rule-page[data-color-scheme="light"] .gh-content figure.kg-gallery-card .kg-gallery-image::after { opacity: 0.38; mix-blend-mode: multiply; } html.mpe-golden-rule-page .kg-bookmark-card a.kg-bookmark-container, html.mpe-golden-rule-page .kg-bookmark-card .kg-bookmark-container, html.mpe-golden-rule-page .kg-card.kg-callout-card { border-color: var(--gr-panel-border) !important; box-shadow: 0 0 0 1px rgba(255, 225, 102, 0.10), 0 18px 50px rgba(0, 0, 0, 0.22); } html.mpe-golden-rule-page .kg-bookmark-card a.kg-bookmark-container, html.mpe-golden-rule-page .kg-bookmark-card .kg-bookmark-container { background: #fff4c4 !important; } html.mpe-golden-rule-page .gh-read-next, html.mpe-golden-rule-page .mpe-article-tags-panel, html.mpe-golden-rule-page .mpe-post-routes, html.mpe-golden-rule-page .gh-comments, html.mpe-golden-rule-page .mpe-book-widget { position: relative; z-index: 1; } html.mpe-golden-rule-page .mpe-article-tags-panel, html.mpe-golden-rule-page .mpe-book-widget { border-color: var(--gr-panel-border) !important; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.04) 12px 13px, transparent 13px 25px), linear-gradient(180deg, var(--gr-panel), var(--gr-panel-2)) !important; } html.mpe-golden-rule-page .gh-foot { position: relative; z-index: 1; background: radial-gradient(circle at 50% 0%, rgba(255, 225, 102, 0.12), transparent 20rem), linear-gradient(180deg, rgba(26, 18, 4, 0.86), rgba(5, 4, 2, 0.96)) !important; border-top: 1px solid rgba(255, 225, 102, 0.16); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-foot { background: radial-gradient(circle at 50% 0%, rgba(130, 88, 12, 0.14), transparent 20rem), linear-gradient(180deg, rgba(241, 214, 127, 0.90), rgba(222, 178, 58, 0.96)) !important; } @media (max-width: 1099px) { html.mpe-golden-rule-page body::after { opacity: calc(var(--gr-pattern-opacity) * 0.62); background-size: 20rem 20rem, 16rem 16rem, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 27rem auto, 100% 100%; } html.mpe-golden-rule-page .gh-article::before { width: min(calc(100% - 2.2rem), 78rem); border-radius: 22px; } } @media (max-width: 767px) { html.mpe-golden-rule-page .gh-article { padding-top: 0; } html.mpe-golden-rule-page .gh-article::before { top: -1.2rem; bottom: -3.2rem; width: calc(100% - 1.4rem); border-radius: 18px; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.04) 12px 13px, transparent 13px 25px), radial-gradient(circle at 50% 0%, rgba(255, 230, 120, 0.10), transparent 18rem), linear-gradient(180deg, var(--gr-panel), var(--gr-panel-2)); } html.mpe-golden-rule-page .gh-article-header { padding-top: 1rem; } html.mpe-golden-rule-page .gh-article-title { font-size: clamp(3.6rem, 12vw, 5.4rem); } html.mpe-golden-rule-page .gh-content { font-size: 1.9rem; line-height: 1.72; } html.mpe-golden-rule-page .gh-article-image, html.mpe-golden-rule-page .gh-content figure.kg-image-card { border-radius: 12px; } } /* ===================================================================== Golden Rule skin revision: single etched gold sheet. Removes the exposed Penrose/Chirality tile field from the page body so the article reads as one continuous inscribed metal surface. Entropy Debt overlays remain above this skin via their own high z-index rules. ===================================================================== */ html.mpe-golden-rule-page { --gr-sheet-dark-0: #100904; --gr-sheet-dark-1: #211405; --gr-sheet-dark-2: #3b2608; --gr-sheet-dark-3: #8f681a; --gr-sheet-light-0: #f9e8a2; --gr-sheet-light-1: #e9c85d; --gr-sheet-light-2: #b88a1d; --gr-panel: rgba(37, 24, 5, 0.78); --gr-panel-2: rgba(20, 12, 3, 0.84); --gr-panel-border: rgba(255, 224, 116, 0.34); --gr-pattern-opacity: 0.18; } html.mpe-golden-rule-page[data-color-scheme="light"] { --gr-panel: rgba(255, 237, 162, 0.78); --gr-panel-2: rgba(232, 196, 83, 0.84); --gr-panel-border: rgba(93, 64, 7, 0.30); --gr-pattern-opacity: 0.12; } html.mpe-golden-rule-page body { background: linear-gradient(180deg, var(--gr-sheet-dark-1), var(--gr-sheet-dark-0)) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] body { background: linear-gradient(180deg, var(--gr-sheet-light-0), var(--gr-sheet-light-1)) !important; } /* One metal plate: no repeated tile image, no hard left/right pattern seams. */ html.mpe-golden-rule-page body::before { z-index: 0; background: radial-gradient(ellipse at 50% -8%, rgba(255, 244, 184, 0.30), transparent 32rem), radial-gradient(ellipse at 18% 18%, rgba(184, 134, 30, 0.22), transparent 26rem), radial-gradient(ellipse at 86% 22%, rgba(255, 214, 80, 0.16), transparent 28rem), radial-gradient(ellipse at 58% 82%, rgba(91, 60, 12, 0.38), transparent 40rem), linear-gradient(90deg, rgba(5, 3, 1, 0.42), transparent 18%, transparent 82%, rgba(5, 3, 1, 0.42)), linear-gradient(180deg, #2b1a05 0%, #1d1204 28%, #120b03 68%, #090603 100%) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] body::before { background: radial-gradient(ellipse at 50% -8%, rgba(255, 253, 224, 0.82), transparent 32rem), radial-gradient(ellipse at 16% 18%, rgba(218, 164, 34, 0.24), transparent 28rem), radial-gradient(ellipse at 86% 22%, rgba(255, 230, 118, 0.36), transparent 30rem), radial-gradient(ellipse at 58% 82%, rgba(171, 124, 21, 0.18), transparent 42rem), linear-gradient(90deg, rgba(106, 73, 8, 0.16), transparent 18%, transparent 82%, rgba(106, 73, 8, 0.16)), linear-gradient(180deg, #f7df88 0%, #e5bd45 42%, #c5901f 100%) !important; } html.mpe-golden-rule-page body::after { z-index: 0; opacity: 1 !important; background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 230, 126, 0.035) 9px 10px, transparent 10px 21px), repeating-linear-gradient(90deg, transparent 0 17px, rgba(0, 0, 0, 0.055) 17px 18px, transparent 18px 38px), repeating-linear-gradient(24deg, transparent 0 22px, rgba(255, 244, 186, 0.035) 22px 23px, transparent 23px 46px), linear-gradient(90deg, rgba(255, 222, 88, 0.10), transparent 18%, transparent 82%, rgba(255, 222, 88, 0.10)), linear-gradient(180deg, rgba(255, 248, 201, 0.055), transparent 24%, rgba(0, 0, 0, 0.24)) !important; background-size: 100% 100% !important; background-position: center !important; background-repeat: no-repeat !important; mix-blend-mode: overlay !important; filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; } html.mpe-golden-rule-page[data-color-scheme="light"] body::after { background-image: repeating-linear-gradient(0deg, transparent 0 9px, rgba(81, 54, 6, 0.040) 9px 10px, transparent 10px 21px), repeating-linear-gradient(90deg, transparent 0 17px, rgba(255, 255, 255, 0.15) 17px 18px, transparent 18px 38px), repeating-linear-gradient(24deg, transparent 0 22px, rgba(82, 56, 7, 0.026) 22px 23px, transparent 23px 46px), linear-gradient(90deg, rgba(83, 56, 6, 0.10), transparent 18%, transparent 82%, rgba(83, 56, 6, 0.10)), linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 24%, rgba(82, 55, 6, 0.14)) !important; mix-blend-mode: multiply !important; } /* Kill full-width inherited bands and let all local frames read as etched metal. */ html.mpe-golden-rule-page .gh-site, html.mpe-golden-rule-page .gh-main, html.mpe-golden-rule-page .gh-outer, html.mpe-golden-rule-page .gh-inner, html.mpe-golden-rule-page .gh-canvas, html.mpe-golden-rule-page .gh-content, html.mpe-golden-rule-page .gh-read-next, html.mpe-golden-rule-page .gh-comments, html.mpe-golden-rule-page .mpe-post-routes, html.mpe-golden-rule-page .mpe-book-widget-panel, html.mpe-golden-rule-page .gh-topic-footer, html.mpe-golden-rule-page .gh-topic-header { background: transparent !important; box-shadow: none !important; } html.mpe-golden-rule-page .gh-head, html.mpe-golden-rule-page .edw-event__panel, html.mpe-golden-rule-page .gh-article::before, html.mpe-golden-rule-page .mpe-article-tags-inner, html.mpe-golden-rule-page .mpe-book-widget-inner, html.mpe-golden-rule-page .gh-read-next, html.mpe-golden-rule-page .gh-comments > div { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.035) 12px 13px, transparent 13px 26px), radial-gradient(ellipse at 50% 0%, rgba(255, 230, 116, 0.105), transparent 23rem), linear-gradient(180deg, var(--gr-panel), var(--gr-panel-2)) !important; border-color: var(--gr-panel-border) !important; } html.mpe-golden-rule-page .edw-event__panel { box-shadow: 0 0 0 1px rgba(255, 235, 145, 0.10) inset, 0 10px 34px rgba(0, 0, 0, 0.24) !important; } html.mpe-golden-rule-page .gh-head { background: linear-gradient(180deg, rgba(64, 43, 9, 0.94), rgba(26, 16, 4, 0.84)) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-head { background: linear-gradient(180deg, rgba(255, 240, 172, 0.94), rgba(229, 194, 86, 0.84)) !important; } /* The article is still a shielded readable plate, but it now belongs to the same sheet. */ html.mpe-golden-rule-page .gh-article::before { width: min(calc(100% - var(--gap) * 1.2), 98rem) !important; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.040) 12px 13px, transparent 13px 26px), radial-gradient(ellipse at 50% 0%, rgba(255, 230, 116, 0.12), transparent 23rem), linear-gradient(180deg, rgba(44, 29, 7, 0.74), rgba(18, 11, 3, 0.82)) !important; box-shadow: 0 0 0 1px rgba(255, 246, 201, 0.035) inset, 0 28px 90px rgba(0, 0, 0, 0.24), 0 0 95px rgba(219, 164, 38, 0.07) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article::before { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(75, 50, 5, 0.028) 12px 13px, transparent 13px 26px), radial-gradient(ellipse at 50% 0%, rgba(255, 255, 226, 0.36), transparent 23rem), linear-gradient(180deg, rgba(255, 236, 159, 0.78), rgba(229, 190, 75, 0.86)) !important; } html.mpe-golden-rule-page .mpe-article-tags-inner, html.mpe-golden-rule-page .mpe-book-widget-inner, html.mpe-golden-rule-page .gh-comments > div { border: 1px solid var(--gr-panel-border) !important; border-radius: 18px; padding: 2rem; } html.mpe-golden-rule-page .mpe-book-widget-inner { border-top: 1px solid var(--gr-panel-border) !important; } html.mpe-golden-rule-page .gh-foot { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.032) 12px 13px, transparent 13px 26px), linear-gradient(180deg, rgba(46, 31, 8, 0.92), rgba(10, 7, 2, 0.96)) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-foot { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(75, 50, 5, 0.025) 12px 13px, transparent 13px 26px), linear-gradient(180deg, rgba(239, 206, 104, 0.94), rgba(207, 157, 42, 0.96)) !important; } /* Keep image etching but make it feel set into the same metal plate. */ html.mpe-golden-rule-page .gh-article-image, html.mpe-golden-rule-page .gh-content figure.kg-image-card, html.mpe-golden-rule-page .gh-content figure.kg-gallery-card .kg-gallery-image { background: linear-gradient(135deg, rgba(255, 236, 146, 0.16), rgba(64, 41, 8, 0.20)), linear-gradient(180deg, rgba(46, 31, 8, 0.90), rgba(16, 10, 3, 0.96)) !important; } @media (max-width: 767px) { html.mpe-golden-rule-page .gh-article::before { width: calc(100% - 1.2rem) !important; } html.mpe-golden-rule-page body::after { opacity: 0.82 !important; } } /* ===================================================================== Golden Rule sheet-width adjustment. Text/layout stays in the normal readable column; only the etched metal article backing plate widens so the page feels like one inscribed sheet rather than a narrow panel floating between side glows. ===================================================================== */ @media (min-width: 1100px) { html.mpe-golden-rule-page .gh-article::before { left: 50% !important; width: min(calc(100vw - clamp(5rem, 8vw, 14rem)), 168rem) !important; max-width: none !important; border-radius: 32px !important; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.040) 12px 13px, transparent 13px 26px), repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 230, 126, 0.020) 42px 43px, transparent 43px 84px), radial-gradient(ellipse at 50% 0%, rgba(255, 230, 116, 0.13), transparent 29rem), radial-gradient(ellipse at 16% 24%, rgba(205, 143, 24, 0.14), transparent 34rem), radial-gradient(ellipse at 84% 28%, rgba(255, 220, 83, 0.10), transparent 36rem), linear-gradient(180deg, rgba(45, 30, 7, 0.80), rgba(16, 10, 3, 0.88)) !important; box-shadow: 0 0 0 1px rgba(255, 246, 201, 0.04) inset, 0 30px 96px rgba(0, 0, 0, 0.26), 0 0 120px rgba(219, 164, 38, 0.055) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-article::before { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(75, 50, 5, 0.028) 12px 13px, transparent 13px 26px), repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.090) 42px 43px, transparent 43px 84px), radial-gradient(ellipse at 50% 0%, rgba(255, 255, 226, 0.40), transparent 29rem), radial-gradient(ellipse at 16% 24%, rgba(180, 123, 18, 0.12), transparent 34rem), radial-gradient(ellipse at 84% 28%, rgba(255, 236, 137, 0.18), transparent 36rem), linear-gradient(180deg, rgba(255, 236, 159, 0.82), rgba(226, 185, 68, 0.88)) !important; } } /* ===================================================================== Golden Rule related-posts frame fix. The related "Latest" section uses .gh-read-next. Earlier sheet styling gave that element a full-width plate, which looked like a horizontal band across the page. Keep the content where it is, but constrain the etched backing frame to the readable content width. ===================================================================== */ html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) { position: relative !important; isolation: isolate; padding-block: 2.4rem !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html.mpe-golden-rule-page .gh-read-next:not(.gh-comments)::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: min(calc(var(--content-width, 720px) + 5.2rem), calc(100vw - var(--gap) * 2)); transform: translateX(-50%); border: 1px solid var(--gr-panel-border); border-radius: 18px; background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(255, 236, 159, 0.035) 12px 13px, transparent 13px 26px), radial-gradient(ellipse at 50% 0%, rgba(255, 230, 116, 0.105), transparent 23rem), linear-gradient(180deg, var(--gr-panel), var(--gr-panel-2)) !important; box-shadow: 0 0 0 1px rgba(255, 246, 201, 0.035) inset, 0 18px 56px rgba(0, 0, 0, 0.18), 0 0 72px rgba(219, 164, 38, 0.045); } html.mpe-golden-rule-page[data-color-scheme="light"] .gh-read-next:not(.gh-comments)::before { background: repeating-linear-gradient(0deg, transparent 0 12px, rgba(75, 50, 5, 0.026) 12px 13px, transparent 13px 26px), radial-gradient(ellipse at 50% 0%, rgba(255, 255, 226, 0.32), transparent 23rem), linear-gradient(180deg, rgba(255, 236, 159, 0.78), rgba(229, 190, 75, 0.86)) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28) inset, 0 16px 46px rgba(96, 67, 9, 0.12); } html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) > * { position: relative; z-index: 1; } @media (max-width: 767px) { html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) { padding-block: 1.8rem !important; } html.mpe-golden-rule-page .gh-read-next:not(.gh-comments)::before { width: calc(100vw - 1.6rem); border-radius: 14px; } } /* Latest frame breathing room: keep the frame centered but give its contents a little etched-plate margin, especially visible on Golden Rule. */ html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) .gh-pagehead, html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) .gh-topic { padding-left: 1.8rem !important; padding-right: 1.8rem !important; } @media (max-width: 767px) { html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) .gh-pagehead, html.mpe-golden-rule-page .gh-read-next:not(.gh-comments) .gh-topic { padding-left: 1.2rem !important; padding-right: 1.2rem !important; } } /* ===================================================================== Mobile custom-skin overflow/zoom guard. These pages use viewport-wide theatrical backgrounds; keep those layers decorative instead of layout-affecting, and pan them subtly with scroll via --mpe-skin-pan-x set in mpe-enhance.js. ===================================================================== */ @media (max-width: 767px) { html.mpe-golden-rule-page, html.mpe-golden-rule-page body { width: 100% !important; max-width: 100vw !important; overflow-x: hidden !important; } html.mpe-golden-rule-page .gh-site, html.mpe-golden-rule-page .gh-main, html.mpe-golden-rule-page .gh-outer, html.mpe-golden-rule-page .gh-inner, html.mpe-golden-rule-page main, html.mpe-golden-rule-page .gh-article, html.mpe-golden-rule-page .gh-content { max-width: 100vw !important; overflow-x: clip !important; } html.mpe-golden-rule-page body::before, html.mpe-golden-rule-page body::after { position: fixed !important; top: 0 !important; bottom: 0 !important; left: -10vw !important; right: auto !important; width: 120vw !important; height: 100vh !important; max-width: none !important; transform: translate3d(var(--mpe-skin-pan-x, 0px), 0, 0) !important; will-change: transform; contain: strict; } html.mpe-golden-rule-page .gh-article::before { left: 0.6rem !important; right: 0.6rem !important; width: auto !important; max-width: none !important; transform: none !important; } } /* Match the temporary Entropy Debt banner frame to the Golden Rule metal sheet. */ html.mpe-golden-rule-page .edw-event { background: linear-gradient(180deg, rgba(32, 20, 5, 0.94), rgba(18, 11, 3, 0.90)) !important; border-top: 1px solid var(--gr-line) !important; border-bottom: 1px solid var(--gr-line) !important; box-shadow: inset 0 1px 0 rgba(255, 236, 159, 0.08), inset 0 -1px 0 rgba(255, 236, 159, 0.08) !important; } html.mpe-golden-rule-page[data-color-scheme="light"] .edw-event { background: linear-gradient(180deg, rgba(255, 240, 172, 0.96), rgba(229, 194, 86, 0.86)) !important; border-top-color: rgba(93, 64, 7, 0.30) !important; border-bottom-color: rgba(93, 64, 7, 0.30) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 -1px 0 rgba(93, 64, 7, 0.14) !important; }