/* ==========================================================================
   The Plastic Mafia — design styles for the WPBakery page
   ========================================================================== */

/* Fonts (self-hosted, latin subset) */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/anton-latin.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-latin.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/source-serif-4-italic-latin.woff2) format('woff2')}

/* Tokens */
body.tpm{
	--tpm-ink:#161514;
	--tpm-paper:#F5F4F0;
	--tpm-red:#A8131C;
	--tpm-red-dark:#6E0B12;
	--tpm-rule:#DEDBD3;
	background:#F5F4F0 !important;
	color:#161514;
}
body.tpm,
body.tpm .container-wrap,
body.tpm #ajax-content-wrap{background-color:#F5F4F0}
body.tpm-book .container-wrap{padding:0 !important;margin:0 !important}
body.tpm-book .container-wrap .container.main-content{max-width:none;width:100%;padding:0 !important}
body.tpm-book .main-content > .row{padding-bottom:0}
body.tpm .wpb_content_element,
body.tpm .wpb_wrapper > div{margin-bottom:0}
body.tpm .wpb_text_column p:last-child{padding-bottom:0}

body.tpm a{color:#A8131C}
body.tpm a:hover{color:#6E0B12}

/* Utility type */
body.tpm .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:12px;line-height:normal}
body.tpm .display{font-family:Anton,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.005em}
body.tpm .serif{font-family:'Source Serif 4',Georgia,serif}
body.tpm .u{text-decoration:underline;text-decoration-color:#A8131C;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---- Rows: 1180px wrap with 40px gutters --------------------------------- */
body.tpm .tpm-row{margin-left:0 !important;margin-right:0 !important;width:100% !important;left:0 !important;padding-left:0 !important;padding-right:0 !important}
body.tpm .tpm-row > .row_col_wrap_12{max-width:1180px;margin:0 auto !important;padding:0 40px !important;box-sizing:border-box;width:100% !important;float:none}
body.tpm .tpm-row .vc_column-inner{padding:0 !important}
body.tpm .tpm-row > .row_col_wrap_12 > .wpb_column{margin:0 !important;padding:0 !important}

/* Grid helper used by multi-column rows */
body.tpm .tpm-grid > .row_col_wrap_12{display:grid !important}
body.tpm .tpm-grid > .row_col_wrap_12 > .wpb_column{width:auto !important;float:none !important;min-width:0}
body.tpm .tpm-grid > .row_col_wrap_12:before,
body.tpm .tpm-grid > .row_col_wrap_12:after{display:none !important}

/* ---- Global header (Salient Theme Options → Header Navigation) -----------
   Colours, fonts, menu, padding and stickiness come from Salient's options;
   these rules only add what the options can't: the red rule and the 1180px wrap. */
body.tpm #header-outer{border-bottom:4px solid #A8131C;box-shadow:none !important}
body.tpm #header-outer #top > .container{max-width:1180px;width:100%;padding:0 40px;box-sizing:border-box}
body.tpm #header-outer #logo{text-decoration:none}
body.tpm #header-outer #top nav > ul > li:last-child > a{padding-right:0 !important}
/* Salient sizes the spacer without the 4px rule; include it so content isn't overlapped. */
body.tpm #header-space{height:68px !important}
/* Menu links are on-page anchors, so don't paint one as "current". */
body.tpm #header-outer[data-lhe] #top nav .sf-menu > li.current-menu-item > a,
body.tpm #header-outer[data-lhe] #top nav .sf-menu > li.current_page_item > a{color:#F5F4F0 !important}
body.tpm #header-outer[data-lhe] #top nav .sf-menu > li > a:hover{color:#E8A3A7 !important}

/* ---- Hero ---------------------------------------------------------------- */
body.tpm .tpm-hero{color:#F5F4F0}
body.tpm .tpm-hero > .row_col_wrap_12{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:end}
body.tpm .tpm-hero-left .wpb_wrapper{display:flex;flex-direction:column;gap:28px}
body.tpm .tpm-hero-right .wpb_wrapper{display:flex;flex-direction:column;gap:32px;padding-bottom:8px}
body.tpm .tpm-hero h1.hero-title{margin:0;padding:0;font-size:148px;line-height:.9;color:#F5F4F0;font-family:Anton,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.005em;text-transform:none}
body.tpm .tpm-hero .tpm-bar{width:120px;height:8px;background:#A8131C}
body.tpm .tpm-hero p.serif{margin:0;padding:0;font-size:22px;line-height:1.55;color:#D9D6CE}
body.tpm .tpm-btns{display:flex;gap:16px;flex-wrap:wrap}
body.tpm .tpm-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;text-decoration:none;font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13px;line-height:normal;letter-spacing:.1em;text-transform:uppercase;box-sizing:content-box}
body.tpm .tpm-btn--solid{background:#A8131C;color:#FFFFFF}
body.tpm .tpm-btn--solid:hover{background:#6E0B12;color:#FFFFFF}
body.tpm .tpm-btn--ghost{border:1px solid #6B6862;color:#F5F4F0}
body.tpm .tpm-btn--ghost:hover{border-color:#F5F4F0;color:#F5F4F0}

/* ---- About the author ---------------------------------------------------- */
body.tpm .tpm-author{border-bottom:2px solid #161514}
body.tpm .tpm-author > .row_col_wrap_12{grid-template-columns:280px minmax(0,1fr);gap:56px;align-items:start}
body.tpm img.tpm-portrait{display:block;width:100% !important;max-width:100% !important;height:auto !important;aspect-ratio:282 / 319;object-fit:cover;filter:grayscale(1) contrast(1.05);margin:0 !important;opacity:1 !important;transform:none !important}
body.tpm .tpm-author-text .wpb_wrapper{display:flex;flex-direction:column;gap:16px;max-width:700px}
body.tpm .tpm-author-text h2{margin:0 0 8px;padding:0;font-size:48px;line-height:1;color:#161514}

/* ---- Dedication ---------------------------------------------------------- */
body.tpm .tpm-dedication .wpb_text_column{display:flex;flex-direction:column;align-items:center;gap:24px;text-align:center}
body.tpm .tpm-dedication p.serif{margin:0;padding:0;max-width:820px;font-size:28px;line-height:1.5;font-style:italic;color:#161514}

/* ---- Body: contents + chapters ------------------------------------------- */
body.tpm .tpm-main{border-top:2px solid #161514}
body.tpm .tpm-main > .row_col_wrap_12{grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start}
body.tpm .tpm-main,
body.tpm .tpm-main > .row_col_wrap_12,
body.tpm .tpm-main .vc_column-inner,
body.tpm .tpm-main .wpb_wrapper{overflow:visible !important}
body.tpm .tpm-toc{position:sticky !important;top:32px;align-self:start}
body.tpm .tpm-toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
body.tpm .tpm-toc li{list-style:none;margin:0;padding:0}
body.tpm .tpm-toc li:before{display:none}
body.tpm .tpm-toc a{display:flex;gap:12px;padding:8px 0;min-height:28px;box-sizing:content-box;text-decoration:none;color:#3A3835;font-family:'Source Serif 4',Georgia,serif;font-size:15px;line-height:1.35;border-bottom:1px solid #DEDBD3}
body.tpm .tpm-toc a:hover{color:#A8131C}
body.tpm .tpm-toc a span{font-family:'IBM Plex Mono',monospace;font-size:11px;color:#A8131C;padding-top:3px;flex-shrink:0}
body.tpm .tpm-toc .mono{color:#161514;margin-bottom:12px}

body.tpm .tpm-article{max-width:700px}
body.tpm .tpm-article p{font-family:'Source Serif 4',Georgia,serif;font-size:19px;line-height:1.72;margin:0 0 24px;padding:0;color:#22201E}
body.tpm .tpm-article .wpb_text_column p:last-child{padding-bottom:0;margin-bottom:24px}
body.tpm .tpm-author-text p{font-family:'Source Serif 4',Georgia,serif;font-size:19px;line-height:1.72;margin:0 0 24px;padding:0;color:#22201E}
body.tpm .tpm-article em{font-style:italic}

body.tpm .tpm-chapter{padding:72px 0 24px !important;margin:0 !important;border-top:2px solid #161514;scroll-margin-top:24px}
body.tpm .tpm-chapter.tpm-first{border-top:0;padding-top:0 !important}
body.tpm .tpm-chapter > .row_col_wrap_12_inner{margin:0 !important;width:100%}
body.tpm .tpm-chapter .wpb_column{margin:0 !important;padding:0 !important;width:100% !important}

/* Salient "Image" element: el_class lands on the <img>, so the wrapper is styled via :has() */
body.tpm .img-with-aniamtion-wrap:has(img.ch-img),
body.tpm .img-with-aniamtion-wrap:has(img.tpm-portrait){display:block;width:100%;margin:0 0 36px !important;padding:0}
body.tpm .img-with-aniamtion-wrap:has(img.tpm-portrait){margin:0 !important}
body.tpm .img-with-aniamtion-wrap:has(img.ch-img--spaced){margin-top:40px !important}
body.tpm .img-with-aniamtion-wrap:has(img.ch-img) .inner,
body.tpm .img-with-aniamtion-wrap:has(img.ch-img) .hover-wrap,
body.tpm .img-with-aniamtion-wrap:has(img.ch-img) .hover-wrap-inner,
body.tpm .img-with-aniamtion-wrap:has(img.tpm-portrait) .inner,
body.tpm .img-with-aniamtion-wrap:has(img.tpm-portrait) .hover-wrap,
body.tpm .img-with-aniamtion-wrap:has(img.tpm-portrait) .hover-wrap-inner{display:block;width:100%;max-width:100% !important;margin:0;transform:none !important}
body.tpm img.ch-img{display:block;width:100% !important;max-width:100% !important;height:400px !important;object-fit:cover;background:#E4E1D9;margin:0 !important;opacity:1 !important;transform:none !important}
body.tpm img.ch-img.ch-img--tall{height:520px !important;object-position:center 20%}
body.tpm img.ch-img.pos-30{object-position:center 30%}
body.tpm img.ch-img.pos-35{object-position:center 35%}

body.tpm .ch-head{display:flex;flex-direction:column;gap:12px;margin:0 0 28px}
body.tpm .ch-head .mono{color:#A8131C}
body.tpm .ch-head h2{margin:0;padding:0;font-size:56px;line-height:1.02;color:#161514;font-family:Anton,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.005em;text-transform:none}
body.tpm blockquote.pull{margin:8px 0 36px;padding:32px 0;border:0;border-top:1px solid #161514;border-bottom:1px solid #161514;font-family:Anton,'Arial Narrow',sans-serif;font-size:40px;line-height:1.1;color:#A8131C;font-style:normal;font-weight:400;background:none;quotes:none}
body.tpm blockquote.pull:before,
body.tpm blockquote.pull:after{display:none}

/* ---- Closing + footer ---------------------------------------------------- */
body.tpm .tpm-closing p.closing{margin:0 auto;padding:0;max-width:980px;font-size:80px;line-height:1;color:#FFFFFF;text-align:center}
/* ---- Global footer (Salient Theme Options → Footer, copyright bar) ------- */
body.tpm #footer-outer{background-color:#161514}
body.tpm #footer-outer #copyright{padding:40px 0;border:0}
body.tpm #footer-outer #copyright > .container{max-width:1180px;width:100%;padding:0 40px;box-sizing:border-box;display:block}
body.tpm #footer-outer #copyright .col.span_5{width:100%;float:none;margin:0}
body.tpm #footer-outer #copyright .col.span_7{display:none}
body.tpm #footer-outer #copyright p{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin:0;padding:0;line-height:normal;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:#B8B4AB}
body.tpm #footer-outer #copyright a.tpm-to-top{color:#F5F4F0;text-decoration:none;padding:14px 0;display:inline-block;opacity:1}
body.tpm #footer-outer #copyright a.tpm-to-top:hover{color:#E8A3A7}

/* Headings reset inside the design (Salient sets its own heading styles) */
body.tpm .tpm-row h1,
body.tpm .tpm-row h2{text-transform:none}
body.tpm .tpm-row h1.display,
body.tpm .tpm-row h2.display{font-family:Anton,'Arial Narrow',sans-serif;font-weight:400;letter-spacing:.005em}

html{scroll-behavior:smooth}

/* Salient sets overflow:hidden on html/body, which disables position:sticky.
   overflow-x:clip still prevents sideways scrolling without creating a scroll container. */
html:has(body.tpm){overflow-x:clip !important;overflow-y:visible !important}
html body.tpm{overflow-x:clip !important;overflow-y:visible !important}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width:900px){
	body.tpm .tpm-row > .row_col_wrap_12{padding:0 20px !important}
	body.tpm #header-outer #top > .container,
	body.tpm #footer-outer #copyright > .container{padding:0 20px}
	body.tpm .tpm-main > .row_col_wrap_12{grid-template-columns:minmax(0,1fr);gap:40px}
	body.tpm .tpm-toc{position:static !important}
	body.tpm .tpm-hero > .row_col_wrap_12,
	body.tpm .tpm-author > .row_col_wrap_12{grid-template-columns:minmax(0,1fr);gap:32px}
	body.tpm img.tpm-portrait{max-width:240px !important}
	body.tpm .ch-head h2{font-size:40px}
	body.tpm img.ch-img,
	body.tpm img.ch-img.ch-img--tall{height:240px !important}
	body.tpm .tpm-article p{font-size:18px}
	body.tpm blockquote.pull{font-size:30px}
	body.tpm .tpm-hero h1.hero-title{font-size:88px}
	body.tpm .tpm-closing p.closing{font-size:48px}
}