/* Folio — public stylesheet. Every colour/type value comes from the theme engine via CSS custom properties set in the page . Nothing here is a hard-coded brand colour. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body.theme-body{ margin:0; overflow-x:clip; background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:var(--body-size); line-height:var(--body-leading); -webkit-font-smoothing:antialiased; } .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4,.card-title,.lead-title,.article-title{ font-family:var(--font-heading); font-weight:var(--heading-weight); letter-spacing:var(--heading-spacing); line-height:1.12; margin:0 0 .4em; } .kicker{ display:inline-block; font-family:var(--font-heading); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; } .kicker.light{color:#fff;opacity:.92} .byline{display:block;margin-top:.5rem;font-size:.82rem;color:var(--muted);font-family:var(--font-heading)} /* ---------- Header / nav ---------- */ .site-header{ background:var(--header-bg); color:var(--header-text); border-bottom:1px solid var(--rule); z-index:40; } .site-header.is-sticky{position:sticky;top:0} .header-inner{display:flex;align-items:center;gap:1.5rem;padding-block:var(--header-pad,1rem)} .wordmark{ font-family:var(--font-wordmark); font-size:var(--wordmark-size); font-weight:var(--wordmark-weight); letter-spacing:var(--wordmark-spacing); text-transform:var(--wordmark-case); color:var(--brand); line-height:1;white-space:nowrap; } .wordmark-logo{max-height:var(--logo-height,2.6rem);width:auto} .site-nav{display:flex;gap:var(--nav-gap);flex:1;flex-wrap:wrap} .site-nav.nav-center{justify-content:center} .site-nav.nav-right{justify-content:flex-end} .site-nav.nav-left{justify-content:flex-start} .site-nav a{ font-family:var(--font-nav);font-size:var(--nav-size);font-weight:var(--nav-weight); color:var(--header-text);opacity:.85;padding-block:.25rem; border-bottom:2px solid transparent;transition:border-color .15s,opacity .15s;white-space:nowrap; } .site-nav.navcase-uppercase a{text-transform:uppercase;letter-spacing:.04em} .site-nav.navcase-smallcaps a{font-variant:small-caps;letter-spacing:.03em} .site-nav a:hover{opacity:1;border-bottom-color:var(--accent)} .site-search input{ border:1px solid var(--rule);background:transparent;color:var(--header-text); border-radius:var(--radius);padding:.4rem .7rem;font-size:.85rem;width:9rem; } .burger{display:none;background:none;border:0;font-size:1.4rem;color:var(--header-text);cursor:pointer;padding:0} /* Centred header layout: logo on its own row, menu beneath. */ .site-header.header-center .header-inner{flex-direction:column;gap:.7rem;text-align:center} .site-header.header-center .site-nav{flex:0 1 auto;justify-content:center} .site-header.header-center .burger{order:-1} /* Keep the nav categories and the search element (box or magnifier) on one line. Left/right header: logo + menu on the left, search pinned to the far-right end. Centred header: categories followed by the search icon, centred under the logo. */ .header-nav-wrap{display:flex;align-items:center;gap:1rem;flex:1;min-width:0} .header-nav-wrap > .site-search, .header-nav-wrap > .search-toggle{margin-left:auto} .site-header.header-center .header-nav-wrap{width:100%;justify-content:center} .site-header.header-center .header-nav-wrap > .site-search, .site-header.header-center .header-nav-wrap > .search-toggle{margin-left:0} /* Optional coloured strip for the centred menu (full-bleed band under the logo) */ .site-header.header-center.menu-strip-on .header-nav-wrap{ width:100vw;margin-left:calc(50% - 50vw); background:var(--menu-strip-bg,#14110f); padding-block:.55rem;justify-content:center; } .site-header.header-center.menu-strip-on .site-nav a{color:var(--menu-strip-text,#fff)} .site-header.header-center.menu-strip-on .site-nav a:hover{opacity:.75} .site-header.header-center.menu-strip-on .search-toggle, .site-header.header-center.menu-strip-on .search-go, .site-header.header-center.menu-strip-on .site-search input{color:var(--menu-strip-text,#fff)} .site-header.header-center.menu-strip-on .site-search input{border-color:var(--menu-strip-text,#fff)} /* ---------- Home hero / masthead ---------- */ .masthead{position:relative;display:flex;min-height:var(--mh-height,46vh);color:var(--mh-text,#fff);overflow:hidden} .masthead.mh-contained{max-width:var(--container,1200px);margin:1.5rem auto;border-radius:var(--img-radius);padding-inline:clamp(1rem,4vw,2.5rem)} .masthead.mhv-top{align-items:flex-start} .masthead.mhv-center{align-items:center} .masthead.mhv-bottom{align-items:flex-end} .masthead.mh-left{text-align:left} .masthead.mh-center{text-align:center} .masthead.mh-right{text-align:right} .mh-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .mh-layer{position:absolute;inset:0} .masthead .mh-bg .mh-layer{filter:blur(var(--mh-blur,0px));transform:scale(1.06)} .mh-video{width:100%;height:100%;object-fit:cover} .mh-slides{position:absolute;inset:0} .mh-slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease} .mh-slideshow.mh-trans-fade .slide.is-active{opacity:1} .mh-slideshow.mh-trans-slide .slide{opacity:1;transform:translateX(100%);transition:transform .7s ease} .mh-slideshow.mh-trans-slide .slide.is-active{transform:translateX(0)} .mh-nav,.mh-playpause{position:absolute;z-index:3;background:rgba(0,0,0,.4);color:#fff;border:0;cursor:pointer;border-radius:50%;width:40px;height:40px;font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s} .mh-nav:hover,.mh-playpause:hover{background:rgba(0,0,0,.65)} .mh-prev{left:14px;top:50%;transform:translateY(-50%)} .mh-next{right:14px;top:50%;transform:translateY(-50%)} .mh-playpause{right:14px;bottom:14px;width:34px;height:34px;font-size:.8rem} .mh-dots{position:absolute;z-index:3;left:0;right:0;bottom:16px;display:flex;gap:.5rem;justify-content:center} .mh-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0} .mh-dot.is-active{background:#fff} .mh-darken,.mh-fade{position:absolute;inset:0;z-index:1;pointer-events:none} .bg-darken,.bg-tint{position:absolute;inset:0;pointer-events:none} .mh-bg .bg-darken,.mh-bg .bg-tint{z-index:1} .mh-blur{position:absolute;inset:0;z-index:1;pointer-events:none} .mh-blur-gradual{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 100%)} .mh-content{position:relative;z-index:2;width:100%;padding-block:3rem} .masthead-title{font-family:var(--font-wordmark);font-size:clamp(2.2rem,5vw,4rem);font-weight:var(--wordmark-weight);line-height:1.05;margin:0} .masthead-subtitle{font-family:var(--font-heading);font-size:1.15rem;opacity:.92;margin:.6rem 0 0;max-width:46ch} .masthead.mh-center .masthead-subtitle{margin-left:auto;margin-right:auto} .masthead.mh-right .masthead-subtitle{margin-left:auto} .mh-cta{display:flex;gap:.8rem;margin-top:1.6rem;flex-wrap:wrap} .masthead.mh-center .mh-cta{justify-content:center} .masthead.mh-right .mh-cta{justify-content:flex-end} .mh-btn{display:inline-block;padding:.7rem 1.4rem;border-radius:var(--radius);font-family:var(--font-heading);font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .1s ease,opacity .15s ease} .mh-btn:hover{transform:translateY(-1px)} .mh-btn-primary{background:var(--btn-bg);color:var(--btn-text)} .mh-btn-ghost{background:transparent;color:var(--mh-text,#fff);border:1.5px solid currentColor} /* ---------- Home: lead block ---------- */ .home-container{padding-block:clamp(1.5rem,5vw,3rem)} .lead-block{border-bottom:1px solid var(--rule);padding-bottom:2.5rem;margin-bottom:2.5rem} .lead-link{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center} .lead-media{background:var(--lead-tint)} .lead-media img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--img-radius)} .lead-text{background:var(--lead-tint);padding:2rem;border-radius:var(--radius)} .lead-title{font-size:clamp(1.9rem,4vw,3rem)} .lead-stand{font-size:1.1rem;color:var(--muted);margin:0} .lead-link:hover .lead-title{color:var(--accent)} /* ---------- Home: grids ---------- */ .grid-block{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:2rem 2rem} .grid-block.even{gap:2.5rem 2rem} .list-block{display:flex;flex-direction:column;gap:1.5rem;max-width:var(--measure);margin-inline:auto} .card-item{min-width:0} .card-link{display:block} .card-media{overflow:hidden;border-radius:var(--img-radius);margin-bottom:.9rem;background:var(--lead-tint)} .card-media img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .4s ease} .card-link:hover .card-media img{transform:scale(1.04)} .card-title{font-size:1.25rem} .card-sm .card-title{font-size:1.1rem} .card-stand{color:var(--muted);font-size:.95rem;margin:.3rem 0 0} .card-link:hover .card-title{color:var(--accent)} .list-block .card-sm{border-bottom:1px solid var(--rule);padding-bottom:1.5rem} .list-block .card-sm:last-child{border-bottom:0} /* ---------- Home: mosaic ---------- */ .mosaic-hero{margin-bottom:2.5rem} .mosaic-hero-link{ display:flex;align-items:flex-end;min-height:var(--hero-height); background-image:linear-gradient(to top,rgba(0,0,0,.7),rgba(0,0,0,.05) 60%),var(--hero-img,none); background-size:cover;background-position:center;border-radius:var(--radius); padding:clamp(1.5rem,5vw,3.5rem);color:#fff; } .mosaic-hero-text{max-width:40rem} .mosaic-title{color:#fff;font-size:clamp(2rem,5vw,3.8rem)} .mosaic-stand{color:#fff;opacity:.9;font-size:1.15rem;margin:0} .mosaic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem} /* ---------- Section / page headers ---------- */ .section-header{border-bottom:2px solid var(--text);padding-bottom:1rem;margin-bottom:2rem} .section-title{font-size:clamp(1.8rem,4vw,2.6rem);margin:0} .section-heading{ font-family:var(--font-heading);font-size:1rem;text-transform:uppercase; letter-spacing:.1em;border-bottom:1px solid var(--rule); padding-bottom:.6rem;margin:3rem 0 1.5rem; } /* ---------- Article ---------- */ .article-header{max-width:var(--measure);margin-inline:auto;padding-top:clamp(1.5rem,5vw,3rem);text-align:left} .article-title{font-size:clamp(2rem,5vw,3.4rem)} .article-stand{font-size:1.25rem;color:var(--muted);line-height:1.5} .article-meta{display:flex;gap:1.2rem;flex-wrap:wrap;font-family:var(--font-heading);font-size:.85rem;color:var(--muted);margin-top:1rem} .article-meta.light,.article-title.light,.article-stand.light{color:#fff} .article-meta.light span{opacity:.9} .article-hero-full{ position:relative;overflow:hidden; min-height:var(--hero-height);display:flex;align-items:flex-end; color:var(--hero-text); } .article-hero-full .hero-media{position:absolute;inset:0;z-index:0} .article-hero-full .bg-darken,.article-hero-full .bg-tint{z-index:1} /* Synapsia-style bottom-rising scrim so the bottom-left title stays legible */ .article-hero-full .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 42%, rgba(0,0,0,0) 68%)} .article-hero-inner{position:relative;z-index:2;width:100%; max-width:min(60ch,92%);margin:0; padding:clamp(1.4rem,4vw,3rem) clamp(1.2rem,5vw,3.2rem); display:flex;flex-direction:column;gap:.55rem;align-items:flex-start} .article-hero-full .article-title{max-width:22ch;margin:0} .article-hero-full .article-stand{margin:0} .article-hero-full .article-meta{margin-top:.2rem} .hero-caption{font-size:.8rem;color:var(--muted);max-width:var(--container);margin:.6rem auto 0;text-align:right} .article-figure{max-width:var(--container);margin:2rem auto} .article-figure img{width:100%;border-radius:var(--img-radius)} .article-figure figcaption{font-size:.82rem;color:var(--muted);margin-top:.5rem} .article-body{max-width:var(--measure);margin:2.5rem auto 0;font-size:1.12rem} .article-body p{margin:0 0 1.4rem} .article-body h2{font-size:1.7rem;margin:2.4rem 0 1rem} .article-body h3{font-size:1.35rem;margin:2rem 0 .8rem} .article-body img{border-radius:var(--img-radius);margin:1.8rem 0} /* Inline images the text flows around (set in the editor's image toolbar). */ .article-body img.folio-img-left{float:left;margin:.3rem 1.6rem 1rem 0;max-width:50%;height:auto} .article-body img.folio-img-right{float:right;margin:.3rem 0 1rem 1.6rem;max-width:50%;height:auto} .article-body img.folio-img-center{float:none;display:block;clear:both;margin:1.8rem auto;max-width:100%;height:auto} .article-body::after{content:"";display:block;clear:both} .article-body hr.folio-hr{border:0;border-top:2px solid var(--accent);width:120px;margin:2rem auto} .article-body .ql-align-left{text-align:left} .article-body .ql-align-center{text-align:center} .article-body .ql-align-right{text-align:right} .article-body .ql-align-justify{text-align:justify} @media (max-width:640px){ .article-body img.folio-img-left,.article-body img.folio-img-right{float:none;display:block;max-width:100%;margin:1.4rem auto} } .article-body a{color:var(--link);text-decoration:var(--link-decoration,underline);text-underline-offset:2px} .article-body a:hover{color:var(--link-hover);text-decoration:underline} .article-body blockquote{ margin:2rem 0;padding:.4rem 0 .4rem 1.6rem;border-left:3px solid var(--accent); font-family:var(--font-heading);font-size:1.5rem;line-height:1.35;font-style:italic;color:var(--text); } .article-body ul,.article-body ol{margin:0 0 1.4rem 1.2rem} .article-body li{margin-bottom:.5rem} /* Drop cap */ .article-body.has-drop-cap>p:first-of-type::first-letter{ font-family:var(--font-wordmark); float:left;font-size:4.4rem;line-height:.78;font-weight:700; padding:.35rem .55rem 0 0;color:var(--accent); } /* ---------- Gallery + lightbox ---------- */ .gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;max-width:var(--container);margin-inline:auto} .gallery-item{flex:0 0 clamp(150px,22%,200px)} .gallery-item img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--img-radius);cursor:zoom-in;transition:opacity .2s;display:block} .gallery-item:hover img{opacity:.85} .lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:100;padding:2rem} .lightbox img{max-width:92vw;max-height:88vh;border-radius:var(--img-radius)} .lightbox-close{position:absolute;top:1.2rem;right:1.6rem;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1} /* ---------- Author card / related ---------- */ .author-card{max-width:var(--measure);margin:3rem auto 0;display:flex;gap:1rem;align-items:center;padding:1.4rem;background:var(--lead-tint);border-radius:var(--radius)} .author-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover} .author-card p{margin:.3rem 0 0;color:var(--muted);font-size:.95rem} .related{margin-top:3.5rem} /* ---------- Slideshow (data-driven, JS-controlled) ---------- */ .slideshow{position:relative;overflow:hidden;border-radius:var(--radius)} .slideshow .slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease} .slideshow .slide.is-active{opacity:1;position:relative} .slideshow.transition-slide .slide{transition:transform .6s ease,opacity .6s ease} /* ---------- Footer ---------- */ .site-footer{background:var(--footer-bg);color:var(--footer-text);margin-top:5rem;padding-block:3rem} .footer-brand{font-family:var(--font-wordmark);font-size:1.8rem;font-weight:700} .footer-tagline{opacity:.75;margin:.3rem 0 1.5rem} .footer-fine{opacity:.55;font-size:.85rem;margin:0} .footer-social{display:flex;gap:1.2rem;margin:0 0 1.2rem} .footer-social a{color:var(--footer-text);opacity:.8;font-size:.9rem;font-weight:600;text-decoration:none} .footer-social a:hover{opacity:1;text-decoration:underline} .site-footer.footer-center{text-align:center} .site-footer.footer-center .footer-social{justify-content:center} .site-footer.footlay-spread .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem} .site-footer.footlay-spread .footer-social{margin:0} .site-footer.footlay-spread .footer-fine{flex-basis:100%;margin-top:.6rem} @media (max-width:640px){ .site-footer.footlay-spread .container{flex-direction:column;align-items:flex-start} .site-footer.footlay-spread.footer-center .container{align-items:center} } /* ---------- Empty state ---------- */ .empty-state{text-align:center;padding:4rem 1rem} .empty-state .btn{margin-top:1rem} .text-muted{color:var(--muted)!important} /* ---------- Responsive ---------- */ @media (max-width:900px){ .grid-block{grid-template-columns:repeat(2,1fr)!important} .lead-link{grid-template-columns:1fr;gap:1.2rem} .lead-text{padding:1.4rem} /* Menu collapses to a burger on tablets and phones. */ .burger{display:block} .header-inner{justify-content:space-between;flex-direction:row!important;align-items:center} /* Don't let the search wrapper grow and shove the wordmark off-centre */ .header-nav-wrap{flex:0 0 auto} /* Centred layout: keep the wordmark truly centred between burger and search */ .site-header.header-center .header-inner{display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;text-align:center} .site-header.header-center .burger{justify-self:start} .site-header.header-center .wordmark{grid-column:2;justify-self:center} .site-header.header-center .header-nav-wrap{grid-column:3;justify-self:end;width:auto} .site-nav{display:none} body.nav-open .site-nav{ display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0; background:var(--header-bg);border-bottom:1px solid var(--rule); padding:1rem 1.2rem;gap:.8rem;justify-content:flex-start;z-index:50; } .site-header{position:relative} .site-header.is-sticky{position:sticky} } @media (max-width:640px){ .grid-block{grid-template-columns:1fr!important} .site-search{display:none} .wordmark{font-size:calc(var(--wordmark-size) * .8)} } @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} } /* ---------- Footer menu ---------- */ .footer-menu{display:flex;flex-wrap:wrap;gap:1.2rem;margin:.4rem 0 1.2rem} .footer-menu a{color:var(--footer-text);opacity:.8;font-size:.9rem;text-decoration:none} .footer-menu a:hover{opacity:1;text-decoration:underline} .site-footer.footer-center .footer-menu{justify-content:center} /* ---------- CMS pages ---------- */ .page-wrap{padding-block:2.5rem} .page-wrap.has-side{display:grid;grid-template-columns:220px 1fr;gap:2.5rem;align-items:start} .page-side nav{display:flex;flex-direction:column;gap:.3rem;position:sticky;top:5rem} .page-side a{color:var(--text);text-decoration:none;padding:.4rem .6rem;border-radius:var(--radius);font-family:var(--font-heading);font-size:.95rem} .page-side a:hover{background:var(--lead-tint)} .page-side a.active{background:var(--lead-tint);font-weight:600} .page-title{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:var(--heading-spacing);font-size:clamp(1.9rem,4vw,2.8rem);margin:0 0 1.4rem} .page-body{max-width:var(--measure)} @media(max-width:768px){.page-wrap.has-side{grid-template-columns:1fr}.page-side nav{position:static;flex-direction:row;flex-wrap:wrap}} /* ---------- Forms ---------- */ .folio-form-block{max-width:640px;margin:1.5rem 0} .form-title{font-family:var(--font-heading);font-weight:var(--heading-weight);font-size:1.6rem;margin:0 0 .4rem} .form-intro{color:var(--muted);margin:0 0 1.2rem} .folio-form .form-field{margin-bottom:1rem} .folio-form .form-label{display:block;font-weight:600;margin-bottom:.3rem;font-family:var(--font-heading);font-size:.92rem} .folio-form .form-control,.folio-form .form-select{width:100%;padding:.6rem .75rem;border:1px solid var(--rule);border-radius:var(--radius);font:inherit;background:var(--bg);color:var(--text)} .folio-form textarea.form-control{resize:vertical} .folio-form .form-check{display:flex;align-items:center;gap:.5rem;margin:.2rem 0} .folio-form .req{color:#dc2626} .form-captcha{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .form-captcha img{height:50px;border-radius:var(--radius);cursor:pointer} .form-captcha .form-control{max-width:220px} .form-submit{margin-top:.5rem} .form-success{background:#e7f6ec;border:1px solid #b7e0c4;color:#1a7f37;padding:.9rem 1.1rem;border-radius:var(--radius)} .form-error{background:#fdecec;border:1px solid #f3b7b7;color:#b42318;padding:.9rem 1.1rem;border-radius:var(--radius);margin-bottom:1rem} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ---------- Newsletter ---------- */ .folio-newsletter{max-width:560px;margin:1.5rem 0} .nl-row{display:flex;gap:.5rem;flex-wrap:wrap} .nl-row input[type=email]{flex:1 1 240px;min-width:0;padding:.6rem .75rem;border:1px solid var(--rule);border-radius:var(--radius);font:inherit;background:var(--bg);color:var(--text)} .nl-consent{display:flex;gap:.5rem;align-items:flex-start;margin-top:.6rem;font-size:.88rem;color:var(--muted)} .nl-msg{display:none;margin-top:.7rem} /* ---------- Advertising ---------- */ .ad-slot{margin:1.5rem 0;text-align:center;position:relative} .ad-slot img{max-width:100%;height:auto;border-radius:var(--img-radius)} .ad-slot-label{display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem} .ad-header,.ad-footer{padding-block:.5rem} .ad-article{margin:2rem auto;max-width:var(--measure)} .ad-sidebar{margin:1rem 0} /* ---------- Premium paywall ---------- */ .article-body{position:relative} .paywall{max-width:var(--measure);margin:0 auto 2rem;position:relative} .article-body + .paywall{margin-top:-3rem} .article-body::after{content:"";display:none} .paywall-inner{border:1px solid var(--rule);border-radius:var(--radius);padding:2rem 1.6rem;text-align:center;background:var(--lead-tint)} .paywall-badge{display:inline-block;background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;margin-bottom:.6rem} .paywall-title{font-family:var(--font-heading);font-weight:var(--heading-weight);font-size:1.6rem;margin:0 0 .5rem} .paywall-msg{color:var(--muted);margin:0 auto 1.2rem;max-width:44ch} .paywall-actions{margin-bottom:1rem} .paywall .folio-newsletter{margin-inline:auto} .paywall-code .nl-row{justify-content:center} /* ---------- Tags + share/print tools ---------- */ .article-tags{max-width:var(--measure);margin:1.5rem auto 0;display:flex;flex-wrap:wrap;gap:.5rem} .tag-chip{display:inline-block;background:var(--lead-tint);color:var(--text);font-size:.8rem;font-family:var(--font-heading);padding:.25rem .7rem;border-radius:999px;text-decoration:none;transition:background .15s,color .15s} a.tag-chip:hover{background:var(--accent);color:#fff} .article-tools{max-width:var(--measure);margin:1.2rem auto 0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;border-top:1px solid var(--rule);padding-top:1.2rem} .tools-label{font-family:var(--font-heading);font-weight:600;font-size:.85rem;color:var(--muted);margin-right:.2rem} .tool-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid var(--rule);border-radius:var(--radius);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;line-height:0;transition:background .15s,border-color .15s,color .15s} .tool-btn:hover{background:var(--lead-tint);border-color:var(--accent);color:var(--accent)} .tool-btn.copied{color:#2e7d32;border-color:#2e7d32} /* ---------- Pagination ---------- */ .pager{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:3rem auto 0;flex-wrap:wrap} .pager a,.pager span{font-family:var(--font-heading);font-size:.9rem;padding:.45rem .8rem;border:1px solid var(--rule);border-radius:var(--radius);color:var(--text);text-decoration:none;min-width:2.4rem;text-align:center} .pager a:hover{border-color:var(--accent)} .pager .is-current{background:var(--text);color:var(--bg);border-color:var(--text)} .pager .is-disabled{opacity:.4;pointer-events:none} /* ---------- Print layout ---------- */ @media print { .site-header, .site-footer, .site-nav, .site-search, .burger, .no-print, .article-tools, .ad-slot, .masthead, .related, .paywall, .footer-menu, .footer-social { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .container, .article-body, .page-body { max-width: 100%; width: 100%; margin: 0; padding: 0; } .article-title { font-size: 22pt; } a { color: #000; text-decoration: none; } .article-body a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .article-figure img, .article-body img { max-width: 100% !important; page-break-inside: avoid; } .article-tags { display: flex !important; } @page { margin: 1.6cm; } } /* ---------- Homepage sections (category blocks) ---------- */ .home-has-aside{display:grid;grid-template-columns:1fr 320px;gap:2.5rem;align-items:start} @media (max-width:900px){.home-has-aside{grid-template-columns:1fr}} .home-section{margin:0 0 2.5rem;min-width:0} .home-main{min-width:0} .section-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--text);margin-bottom:1.1rem;padding-bottom:.4rem} .home-section .section-heading{font-family:var(--font-heading);font-weight:var(--heading-weight);font-size:1.35rem;margin:0} .section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem} .section-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:1.4rem} /* Synapsia-style homepage hero lead: image, bottom-rising scrim, bottom-left caption */ .hero-lead{position:relative;border-radius:var(--img-radius);overflow:hidden;min-height:clamp(340px,42vh,480px);background:var(--lead-tint,#eef3fb)} .hero-lead-link{position:absolute;inset:0;display:block;text-decoration:none;color:#fff} .hero-lead-media{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .4s ease} .hero-lead:hover .hero-lead-media{transform:scale(1.03)} .hero-lead-scrim{position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 44%, rgba(0,0,0,0) 72%)} .hero-lead-plain .hero-lead-scrim{background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%, transparent 100%)} .hero-lead-cap{position:absolute;left:0;right:auto;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.55rem;padding:clamp(1.2rem,2.4vw,2rem);width:fit-content;max-width:min(640px,94%)} .hero-lead-cap .kicker.light{color:#fff;opacity:.92} .hero-lead-byline{font-family:var(--font-heading);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;opacity:.9} .hero-lead-title{font-family:var(--font-heading);font-weight:var(--heading-weight);letter-spacing:var(--heading-spacing);font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1.12;color:#fff;margin:0;text-shadow:0 1px 18px rgba(0,0,0,.4)} .hero-lead-stand{color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.5;margin:0;max-width:52ch} .btn-hero{align-self:center;background:var(--btn-bg);color:var(--btn-text);padding:.5rem 1.15rem;border-radius:var(--btn-radius);font-family:var(--font-heading);font-weight:700;font-size:.82rem;letter-spacing:.02em;margin-top:.2rem} .hero-lead:hover .btn-hero{filter:brightness(1.08)} @media (max-width:760px){.section-hero{grid-template-columns:1fr}} .section-hero-side{display:flex;flex-direction:column;gap:1rem} .section-rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.6rem;max-width:100%;scrollbar-width:thin} .section-rail > .card-item{flex:0 0 clamp(230px,30%,290px);min-width:0;scroll-snap-align:start} .section-list{list-style:none;margin:0;padding:0} .section-list li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--rule)} .section-list-title{font-family:var(--font-heading);font-weight:600} .section-list a{display:flex;gap:.6rem;align-items:baseline;text-decoration:none;color:var(--text)} .section-list a:hover .section-list-title{color:var(--accent)} .section-list-date{color:var(--muted);font-size:.8rem;white-space:nowrap} /* Sidebar */ .home-aside .aside-card{border:1px solid var(--rule);border-radius:var(--box-radius,12px);padding:1.1rem;margin-bottom:1.4rem} .aside-card.box-bg-on{position:relative;overflow:hidden;border-color:transparent} .aside-card .box-bg{position:absolute;inset:0;z-index:0} .aside-card .box-layer{position:absolute;inset:0} .aside-card .aside-inner{position:relative;z-index:1} .aside-card.box-text-light{color:#fff} .aside-card.box-text-light .aside-list a{color:#fff} .aside-card.box-text-light .aside-list li{border-bottom-color:rgba(255,255,255,.22)} .aside-card.box-text-light .tag-chip{color:#fff;border-color:rgba(255,255,255,.45)} .aside-card.box-text-light p,.aside-card.box-text-light .nl-note{color:rgba(255,255,255,.85)} .aside-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin:0 0 .7rem;padding-bottom:.4rem;border-bottom:2px solid var(--text)} .aside-list{list-style:none;margin:0;padding:0} .aside-list li{padding:.45rem 0;border-bottom:1px solid var(--rule);font-family:var(--font-heading);font-size:.92rem;line-height:1.35} .aside-list a{text-decoration:none;color:var(--text)} .aside-list a:hover{color:var(--accent)} .aside-tags{display:flex;flex-wrap:wrap;gap:.4rem} /* ---------- Sidebar box heading styles (colour accents) ---------- Section headings (Featured, Latest, category blocks) and page titles stay in the plain black-and-white treatment; only the sidebar boxes take colour. .hs-bar = light text on an accent-coloured band (default) .hs-line = accent-coloured rule + accent heading text .hs-plain = no colour anywhere */ .hs-bar .home-aside .aside-card{overflow:hidden;padding-top:0} .hs-bar .aside-title{ background:var(--accent);color:var(--accent-ink,#fff);border-bottom:0; margin:0 -1.1rem 1rem;padding:.6rem 1.1rem;font-size:.95rem; letter-spacing:.03em; } .hs-line .aside-title{color:var(--accent);border-bottom-color:var(--accent)} /* Breaking bar */ .breaking-bar{background:var(--text);color:var(--bg);overflow:hidden} .breaking-inner{display:flex;align-items:center;gap:1rem} .breaking-label{background:var(--accent);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;padding:.5rem .8rem;white-space:nowrap;flex:none} .breaking-track{display:flex;gap:2rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:none} .breaking-track::-webkit-scrollbar{display:none} .breaking-item{color:var(--bg);text-decoration:none;white-space:nowrap;font-size:.88rem;opacity:.9} .breaking-item:hover{opacity:1;text-decoration:underline} /* Horizontal marquee (right → left); speed from --breaking-speed */ .breaking-marquee{flex:1;overflow:hidden} .breaking-marquee .breaking-track{display:inline-flex;gap:2.5rem;overflow:visible;white-space:nowrap;padding:.5rem 0;will-change:transform;animation:breaking-marquee var(--breaking-speed,30s) linear infinite} .breaking-bar:hover .breaking-marquee .breaking-track{animation-play-state:paused} @keyframes breaking-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* Vertical scroll (bottom → top), one headline at a time */ .breaking-vert{flex:1;height:2.4em;overflow:hidden;position:relative} .breaking-vlist{list-style:none;margin:0;padding:0;transition:transform .5s ease} .breaking-vlist li{height:2.4em;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .breaking-vlist a{color:var(--bg);text-decoration:none;font-size:.9rem} @media (prefers-reduced-motion:reduce){.breaking-marquee .breaking-track{animation:none}} /* ---------- Rounded inline images in article/page bodies (SiteMaker-style) ---------- */ .article-body img, .page-body img, .article-body figure img, .article-body p img { border-radius: var(--img-radius); max-width: 100%; height: auto; } .article-body figure { margin: 1.5rem 0; } .article-body figure img { display: block; } /* ---------- Social SVG icons ---------- */ .footer-social{display:flex;gap:.4rem;align-items:center} .footer-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--footer-text,#fff);opacity:.85;transition:opacity .15s,background .15s} .footer-social a:hover{opacity:1;background:rgba(255,255,255,.12)} .social-svg{display:block} /* ---------- Header search: icon button + inline go + expanding panel ---------- */ .site-search{display:flex;align-items:center;gap:.3rem} .site-search input{border:1px solid var(--rule);background:transparent;color:var(--header-text);border-radius:var(--radius);padding:.3rem .6rem} .search-go,.search-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;color:var(--header-text);cursor:pointer;padding:.35rem;border-radius:var(--radius);line-height:0} .search-go:hover,.search-toggle:hover{background:rgba(127,127,127,.15)} .header-search-panel{background:var(--header-bg);border-bottom:1px solid var(--rule)} .header-search-panel[hidden]{display:none} .hsp-form{display:flex;gap:.6rem;align-items:center;padding:.8rem 0} .hsp-form input{flex:1;border:1px solid var(--rule);background:var(--bg);color:var(--text);border-radius:var(--radius);padding:.6rem .8rem;font-size:1rem} .hsp-btn{white-space:nowrap} /* Masthead contained — defensive: guarantee it centres within page width */ .masthead.mh-contained{width:auto;box-sizing:border-box} /* ---------- Author name as a kicker above the title (optional) ---------- */ .byline-kicker{display:inline-flex;align-items:center;gap:1rem;color:var(--accent);font-family:var(--font-heading);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;line-height:1;margin-bottom:1.1rem} .byline-kicker::after{content:"";display:block;width:3rem;height:2px;background:currentColor;flex:none} .byline-kicker.light{color:#fff} /* Corner-angle control on the post-article boxes + inline images. Boxes follow the "Corner radius" control (--radius); images follow the "Image corner radius" control (--img-radius). */ .author-card{border-radius:var(--radius)} .article-body img,.page-body img,.article-body figure img,.article-body p img{border-radius:var(--img-radius)} /* ---------- Featured-stories slider hero (article image + title bottom-left) ---------- */ .masthead.mh-is-featured{color:#fff} .mh-featured{position:absolute;inset:0;overflow:hidden} .mh-featured .mh-slides{position:absolute;inset:0} .mh-featured-slide{position:absolute;inset:0;display:block;text-decoration:none;color:#fff;overflow:hidden} .mh-featured-slide .mh-fmedia{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0} .mh-featured-slide .mh-fscrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,0) 70%)} .mh-featured-slide .bg-darken,.mh-featured-slide .bg-tint{z-index:1} .mh-featured-cap{position:absolute;left:0;bottom:0;z-index:2;max-width:min(760px,90%);padding:clamp(1.2rem,4vw,2.6rem);display:flex;flex-direction:column;gap:.6rem} .mh-featured-cap .kicker.light{color:#fff;opacity:.9} .mh-featured-title{font-family:var(--font-heading);font-weight:var(--heading-weight);font-size:clamp(1.5rem,3.4vw,2.8rem);line-height:1.1;color:#fff;text-shadow:0 1px 20px rgba(0,0,0,.35)} /* Contained (bleedless) featured hero keeps rounded corners over the slides */ .masthead.mh-contained.mh-is-featured{overflow:hidden} /* Admin range sliders */ .range-input{width:100%;accent-color:var(--accent,#e8590c)} .range-out{font-weight:700;color:var(--accent,#e8590c);font-variant-numeric:tabular-nums} /* ---------- Star ratings ---------- */ .rating-block{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:1.6rem 0;padding:.6rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .rating-label{font-family:var(--font-heading);font-weight:600;font-size:.9rem} .rating-block .stars{display:inline-flex;gap:.1rem} .rating-block .star{background:none;border:0;padding:0 .05rem;font-size:1.4rem;line-height:1;color:var(--rule);cursor:default} .rating-block .stars[data-can] .star{cursor:pointer} .rating-block .star.on{color:var(--accent)} .rating-block .stars[data-can] .star:hover, .rating-block .stars[data-can] .star.hovered{color:var(--accent);opacity:.85} .rating-meta{font-variant-numeric:tabular-nums;font-weight:700} .rating-meta small{font-weight:400;color:var(--muted)} .rating-hint{font-size:.8rem;color:var(--muted)} /* ---------- Corner radius for boxes sitewide ---------- */ .aside-card,.author-card,.paywall-inner,.folio-form-block,.lead-text,.member-box{border-radius:var(--box-radius,12px)} /* Box background layers extended to content boxes */ .author-card.box-bg-on,.paywall-inner.box-bg-on{position:relative;overflow:hidden} .author-card .box-bg,.paywall-inner .box-bg{position:absolute;inset:0;z-index:0} .author-card .box-layer,.paywall-inner .box-layer{position:absolute;inset:0} .author-card .box-inner{position:relative;z-index:1;display:flex;gap:1rem;align-items:center;width:100%} .paywall-inner .box-inner{position:relative;z-index:1} .author-card.box-text-light,.paywall-inner.box-text-light{color:#fff} .author-card.box-text-light p{color:rgba(255,255,255,.85)} /* ---------- Member login / paywall subscribe ---------- */ .member-box{border:1px solid var(--rule);padding:1.2rem;margin-top:1rem} .member-box .form-control{margin-bottom:.5rem} /* ---------- Comments ---------- */ .comments{max-width:var(--measure);margin:3rem auto 0} .comment-list{list-style:none;padding:0;margin:1rem 0 2rem} .comment{padding:1rem 0;border-bottom:1px solid var(--rule)} .comment-head{margin-bottom:.3rem} .comment p{margin:0} .comment-form textarea{width:100%} .comment-gate{background:var(--lead-tint);padding:1rem 1.2rem;border-radius:var(--box-radius,12px)} .member-register{margin-top:1rem} .member-register summary{cursor:pointer;font-weight:600;font-size:.9rem} .member-register form{margin-top:.7rem} .narrow-page{max-width:32rem} /* ---------- Subscription plans ---------- */ .plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin:1.5rem 0} .plan-card{position:relative;border:1px solid var(--rule);border-radius:var(--box-radius,12px);padding:1.5rem;text-align:center} .plan-featured{border-color:var(--accent);box-shadow:0 6px 24px rgba(0,0,0,.06)} .plan-badge{position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.7rem;padding:.2rem .6rem;border-radius:999px;letter-spacing:.03em} .plan-name{font-family:var(--font-heading);margin:.2rem 0} .plan-price{font-size:1.9rem;font-weight:700;margin:.4rem 0} .plan-price span{font-size:.85rem;font-weight:400;color:var(--muted)} .plan-feat{list-style:none;padding:0;margin:1rem 0;text-align:left;font-size:.9rem} .plan-feat li{padding:.25rem 0 .25rem 1.3rem;position:relative} .plan-feat li::before{content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700} /* ---------- Mobile responsiveness for imported column layouts ---------- The section builder (hero / grid / list / rail) needs to reflow on phones and tablets rather than keep desktop columns. */ @media (max-width:900px){ .section-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:600px){ .section-grid{grid-template-columns:1fr !important} .section-hero{grid-template-columns:1fr !important} .section-hero-side{flex-direction:column} /* Rail turns into a clean full-width swipe carousel (one card + a peek) */ .section-rail > .card-item{flex-basis:82% !important} .section-list li{flex-direction:column;align-items:flex-start;gap:.15rem} .section-list-date{font-size:.75rem;color:var(--muted)} .home-section{margin-bottom:2rem} } /* Featured hero "Read More" CTA (bottom-left, under the title) */ .mh-featured-cta{display:inline-block;margin-top:.9rem;align-self:flex-start;background:var(--accent);color:#fff;font-family:var(--font-heading);font-weight:600;font-size:.85rem;letter-spacing:.02em;padding:.5rem 1.1rem;border-radius:var(--box-radius,10px)} .mh-featured-slide:hover .mh-featured-cta{filter:brightness(1.08)} /* Sponsored disclosure tag */ .sponsored-tag{background:var(--lead-tint);color:var(--muted);padding:.05rem .45rem;border-radius:4px} /* Numbered "Most read" + Readers' Choice */ .aside-rank{list-style:none;margin:0;padding:0} .aside-rank li{display:flex;gap:.65rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--rule)} .aside-rank li:last-child{border-bottom:0} .aside-rank .rank-num{font-family:var(--font-heading);font-weight:800;font-size:1.15rem;color:var(--accent);min-width:1.2em;text-align:center;line-height:1;flex:none} .aside-rank a{text-decoration:none;color:inherit} .aside-rank a:hover{color:var(--accent)} .aside-rated li{display:flex;flex-direction:column;gap:.15rem;padding:.45rem 0;border-bottom:1px solid var(--rule)} .aside-rated li:last-child{border-bottom:0} .rc-stars{color:var(--accent);font-size:.82rem;letter-spacing:.08em} /* Status label pills (Featured / Recommended / Sponsored) */ .card-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .4rem} .card-media{position:relative} .card-media .card-badges{position:absolute;top:.55rem;left:.55rem;margin:0} .card-media .card-badges.badge-grp-left{left:.55rem;right:auto} .card-media .card-badges.badge-grp-right{left:auto;right:.55rem;justify-content:flex-end} .card-media .card-badges.badge-align-right{left:auto;right:.55rem;justify-content:flex-end} .status-badge{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-heading);font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;padding:.28rem .55rem;border-radius:3px;line-height:1;color:#fff} .badge-featured{background:var(--badge-featured)} .badge-recommended{background:var(--badge-recommended)} .badge-sponsored{background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.35)} .card-text .card-badges .status-badge.badge-sponsored{background:transparent;color:var(--muted);border:1px solid var(--rule)} /* Author byline above the card / article title */ .card-byline{display:block;font-family:var(--font-heading);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:0 0 .15rem} .card-kicker-above{margin:0 0 .4rem} .card-kicker-above .kicker{display:inline-block} .article-byline-above{display:block;font-family:var(--font-heading);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0 0 .3rem;font-size:.85rem} /* Footer RSS link */ .footer-rss{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);text-decoration:none;font-size:.85rem;margin-top:.4rem} .footer-rss:hover{color:var(--accent)} .footer-rss svg{color:#f26522} /* Status badge sitting inline at the front of the article meta line */ .article-meta{align-items:center} .article-meta .card-badges{margin:0;display:inline-flex} .article-meta .status-badge{font-size:.62rem} /* Category dropdown (parent with sub-categories) in the primary nav */ .site-nav .nav-parent{position:relative;display:inline-flex;align-items:center} .site-nav .nav-drop{position:absolute;top:100%;left:0;z-index:60;display:none;flex-direction:column; min-width:180px;background:var(--header-bg,#fff);border:1px solid var(--rule);border-radius:6px; box-shadow:0 10px 26px rgba(0,0,0,.14);padding:.35rem} .site-nav .nav-parent:hover .nav-drop, .site-nav .nav-parent:focus-within .nav-drop{display:flex} .site-nav .nav-drop a{padding:.4rem .6rem;white-space:nowrap;border-radius:4px;border-bottom:0} .site-nav .nav-drop a:hover{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)} @media (max-width:800px){ /* In the stacked mobile menu, show sub-categories inline & indented (no hover) */ body.nav-open .site-nav .nav-parent{display:flex;flex-direction:column;align-items:flex-start} body.nav-open .site-nav .nav-drop{display:flex;position:static;box-shadow:none;border:0;padding:.2rem 0 .2rem .9rem;min-width:0;background:transparent} } /* ---------- Featured hero: enforced rules ---------- */ /* Always a tall, full hero when featured stories drive it */ .masthead.mh-is-featured{min-height:clamp(420px,70vh,760px)} /* Title/caption ALWAYS bottom-left, whatever the masthead alignment settings say */ .masthead.mh-is-featured .mh-featured-cap{left:0;right:auto;top:auto;bottom:0;align-items:flex-start;text-align:left;z-index:3;pointer-events:none;width:fit-content;max-width:min(760px,92%)} .masthead.mh-is-featured .mh-featured-title{text-align:left} /* Whole-slide link sits under the caption so the CTA buttons stay clickable */ .mh-featured-slide .mh-slide-cover{position:absolute;inset:0;z-index:2;display:block} /* Up to two CTA buttons; colours/size/radius come from inline styles (unclobberable) */ .mh-hero-ctas{display:flex;flex-direction:column;gap:.65rem;margin-top:.95rem;pointer-events:none;align-self:stretch} .mh-hero-ctas .hero-cta{pointer-events:auto;transition:filter .15s ease} .mh-hero-ctas .hero-cta:hover{filter:brightness(1.08)} /* ---------- Inline (in-article) image frame / shadow options ---------- */ .imgframe-border .article-body img{background:#fff;border:1px solid var(--rule);padding:8px;box-shadow:0 1px 2px rgba(0,0,0,.06)} .imgframe-shadow .article-body img{box-shadow:0 6px 18px rgba(0,0,0,.16)} .imgframe-lift .article-body img{box-shadow:0 16px 36px rgba(0,0,0,.24)} /* Lightbox previous / next controls */ .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:0;width:52px;height:72px;font-size:2.4rem;line-height:1;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:background .15s} .lightbox-nav:hover{background:rgba(0,0,0,.65)} .lightbox-prev{left:2.5%} .lightbox-next{right:2.5%} @media (max-width:640px){.lightbox-nav{width:40px;height:56px;font-size:1.8rem}} /* Rich footer content */ .footer-rich{max-width:var(--container);margin:1.2rem auto .4rem;font-size:.92rem;line-height:1.6;color:var(--footer-text);opacity:.92} .footer-rich a{color:var(--footer-text);text-decoration:underline;text-underline-offset:2px} .footer-rich a:hover{opacity:.8} .footer-rich ul{padding-left:1.1rem;margin:.4rem 0} .footer-rich h1,.footer-rich h2,.footer-rich h3,.footer-rich h4{font-family:var(--font-heading);margin:.4rem 0} /* Author byline link: reads as plain text, underlines on hover */ .byline-author{color:inherit;text-decoration:none} .byline-author:hover{text-decoration:underline;text-underline-offset:2px} /* "More articles" link in the article's author box (light, small) */ .author-more{display:inline-block;margin-top:.55rem;font-family:var(--font-heading);font-weight:400;font-size:.82rem;color:inherit;text-decoration:underline;text-underline-offset:3px} .author-more:hover{opacity:.75} /* Author archive: their profile links (social media etc.) */ .author-archive-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1rem;margin:.5rem auto 0;font-size:.9rem} .author-archive-links a{color:var(--accent);text-decoration:none} .author-archive-links a:hover{text-decoration:underline;text-underline-offset:2px} /* Author archive header */ .author-archive-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem} .author-archive-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;margin-bottom:.4rem} .author-archive-bio{max-width:60ch;margin:.3rem auto 0;color:var(--muted);line-height:1.6} /* ============ Stage 2: title positions + layout blocks ============ */ /* --- Title position on cards --- */ .card-tp-above .card-link{display:flex;flex-direction:column-reverse} .card-tp-left .card-link,.card-tp-right .card-link{display:flex;gap:.9rem;align-items:flex-start} .card-tp-right .card-link{flex-direction:row} .card-tp-left .card-link{flex-direction:row-reverse} .card-tp-left .card-media,.card-tp-right .card-media{flex:0 0 42%;min-width:0} .card-tp-left .card-text,.card-tp-right .card-text{flex:1 1 auto;min-width:0} .card-tp-over .card-link{position:relative;display:block} .card-tp-over .card-media{margin:0} .card-tp-over .card-text{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1rem .9rem;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.35) 55%,transparent);border-radius:0 0 var(--img-radius) var(--img-radius)} .card-tp-over .card-title{color:#fff} .card-tp-over .kicker{color:#fff;opacity:.85} /* --- Magazine: 1 large + 2 medium + 4 small --- */ .section-magazine{display:grid;grid-template-columns:2fr 1fr;gap:1.1rem} .section-magazine .mag-big{grid-row:span 2} .section-magazine .mag-med{display:grid;gap:1.1rem} .section-magazine .mag-small{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem} @media (max-width:820px){.section-magazine{grid-template-columns:1fr}.section-magazine .mag-big{grid-row:auto}.section-magazine .mag-small{grid-template-columns:repeat(2,1fr)}} /* --- Split 50/50 --- */ .section-split{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem} @media (max-width:720px){.section-split{grid-template-columns:1fr}} /* --- Mosaic --- */ .section-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem;grid-auto-flow:dense} .section-mosaic .mosaic-wide{grid-column:span 2;grid-row:span 2} @media (max-width:820px){.section-mosaic{grid-template-columns:repeat(2,1fr)}.section-mosaic .mosaic-wide{grid-column:span 2}} /* --- Vertical stack (each card horizontal) --- */ .section-stack{display:flex;flex-direction:column;gap:1rem} .section-stack .card-item .card-link{display:flex;gap:1rem;align-items:flex-start} .section-stack .card-media{flex:0 0 34%;min-width:0} .section-stack .card-text{flex:1 1 auto;min-width:0} .section-stack .card-tp-over .card-link{display:block} /* --- Accordion --- */ .section-accordion{border-top:1px solid var(--rule)} .acc-item{border-bottom:1px solid var(--rule)} .acc-head{cursor:pointer;padding:.85rem .2rem;font-family:var(--font-heading);font-weight:700;display:flex;gap:.6rem;align-items:baseline;list-style:none} .acc-head::-webkit-details-marker{display:none} .acc-head::before{content:'+';color:var(--accent);font-weight:700;width:1em} .acc-item[open] .acc-head::before{content:'–'} .acc-title{font-size:1.15rem} .acc-body{padding:0 .2rem .9rem 1.6rem;color:var(--muted)} .acc-more{color:var(--accent);text-decoration:none;font-weight:600} /* --- Spotlight: single huge feature with contrasting frame --- */ .section-spotlight{background:var(--brand,#1f2d3d);border-radius:12px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.22)} .spotlight-link{display:grid;grid-template-columns:1.3fr 1fr;color:#fff;text-decoration:none;align-items:stretch} .spotlight-media{min-height:340px} .spotlight-media img{width:100%;height:100%;object-fit:cover;display:block} .spotlight-text{padding:2.4rem 2.2rem;display:flex;flex-direction:column;justify-content:center;gap:.6rem} .spotlight-text .kicker{color:#fff;opacity:.8} .spotlight-title{font-size:2.1rem;line-height:1.15;margin:0;color:#fff} .spotlight-stand{opacity:.9;font-size:1.05rem} @media (max-width:760px){.spotlight-link{grid-template-columns:1fr}.spotlight-media{min-height:210px}} /* --- Newspaper columns (3 across) --- */ .section-columns{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .section-columns .card-item:not(:last-child){border-right:1px solid var(--rule);padding-right:1.4rem} @media (max-width:820px){.section-columns{grid-template-columns:1fr}.section-columns .card-item{border-right:0;padding-right:0}} /* --- Cards with a side list --- */ .section-cards-sidebar{display:grid;grid-template-columns:1fr 300px;gap:1.6rem} .section-cards-sidebar .scs-main{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem} .section-cards-sidebar .scs-aside{border-left:1px solid var(--rule);padding-left:1.2rem} @media (max-width:860px){.section-cards-sidebar{grid-template-columns:1fr}.section-cards-sidebar .scs-aside{border-left:0;padding-left:0}} /* --- Carousel --- */ .section-carousel{position:relative} .section-carousel .slide{display:none} .section-carousel .slide.is-active{display:block} .section-car-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;background:rgba(0,0,0,.45);color:#fff;border:0;width:44px;height:60px;font-size:2rem;cursor:pointer;border-radius:6px} .section-car-nav:hover{background:rgba(0,0,0,.7)} .section-car-nav{left:.6rem}.section-car-next{left:auto;right:.6rem} /* Page CTA button + related articles */ .page-cta{margin:1.8rem 0 .5rem} .btn-cta,.article-body a.btn-cta,.page-body a.btn-cta{display:inline-block;font-family:var(--font-heading);font-weight:700;text-decoration:none} .btn-cta:hover,.article-body a.btn-cta:hover{filter:brightness(.94);text-decoration:none} .page-related{margin-top:2.4rem} /* Shared related-articles strip (article + page) */ .related-articles{margin-top:2.4rem;border-top:1px solid var(--rule);padding-top:1.4rem} .related-articles .section-heading{font-family:var(--font-heading);font-size:1.3rem;margin:0 0 1rem} .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem} .related-rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem} .related-rail .card-item{flex:0 0 clamp(220px,42%,300px);scroll-snap-align:start} @media (max-width:760px){.related-grid{grid-template-columns:1fr 1fr}} /* Authors directory page */ .authors-directory{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.2rem} .author-card-link{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:1.4rem 1rem;border:1px solid var(--rule);border-radius:10px;text-decoration:none;color:inherit;transition:box-shadow .15s,transform .15s} .author-card-link:hover{box-shadow:0 10px 26px rgba(0,0,0,.1);transform:translateY(-2px)} .author-dir-avatar{width:76px;height:76px;border-radius:50%;object-fit:cover} .author-dir-initial{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;font-family:var(--font-heading);font-weight:700;font-size:1.8rem} .author-dir-name{font-family:var(--font-heading);font-weight:700;font-size:1.1rem} .author-dir-bio{color:var(--muted);font-size:.85rem;line-height:1.45} .author-dir-count{font-size:.78rem;color:var(--accent);font-weight:600;margin-top:.2rem} /* Sidebar layout blocks (compact) */ .aside-block .home-section{margin:0} .aside-block .section-head{margin-bottom:.5rem} .aside-block .section-heading{font-size:1rem;font-family:var(--font-heading)} .aside-block .section-stack{gap:.7rem} .aside-block .section-stack .card-item .card-link{gap:.6rem;align-items:flex-start} .aside-block .section-stack .card-media{flex:0 0 68px} .aside-block .card-title{font-size:.92rem;line-height:1.25} .aside-block .card-stand{display:none} .aside-block .section-grid,.aside-block .section-rail{display:block} .aside-block .section-rail{display:flex;gap:.6rem;overflow-x:auto} .aside-block .section-rail .card-item{flex:0 0 78%} /* Custom (single-editor) footer */ .footer-custom{max-width:var(--container);margin:0 auto;color:var(--footer-text);line-height:1.7} .footer-custom a{color:var(--footer-text);text-decoration:underline;text-underline-offset:2px} .footer-custom a:hover{opacity:.8} .footer-custom ul{list-style:none;padding:0;margin:.4rem 0;display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;justify-content:inherit} .footer-custom h1,.footer-custom h2,.footer-custom h3,.footer-custom h4{font-family:var(--font-heading);margin:.3rem 0} .site-footer.footer-center .footer-custom{text-align:center} /* Share tools variants: centred, and top (near byline, no top rule) */ .article-tools.share-center{justify-content:center} .article-tools.share-top{border-top:0;padding-top:0;margin:.4rem auto 1.4rem} /* Columns footer (Sitemaker-style) */ .footer-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:2.2rem;align-items:start} .footer-col-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;margin:0 0 .8rem;color:var(--footer-text)} .footer-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem} .footer-col-links a{color:var(--footer-text);opacity:.85;text-decoration:none} .footer-col-links a:hover{opacity:1;text-decoration:underline} .footer-col-brand .footer-brand{font-family:var(--font-heading);font-weight:800;font-size:1.3rem} .footer-col-brand .footer-tagline{opacity:.8;margin:.3rem 0 .7rem} .site-footer.footer-center .footer-columns{text-align:center} .site-footer.footer-center .footer-col-links{align-items:center} @media (max-width:600px){.footer-columns{gap:1.6rem}} /* Inline share row: spans its column and left-aligns with the line above (byline/title) */ .article-tools.share-inline{max-width:none;margin:.6rem 0 .2rem;padding:0;border-top:0;justify-content:flex-start} .page-body .article-tools.share-inline{margin:.2rem 0 1.2rem} /* Columns footer — right-aligned info column + stacked social */ .footer-col-info{text-align:right} .footer-col-info p{margin:0 0 .5rem;font-size:.85rem;opacity:.9} .footer-col-info .footer-info-fine{opacity:.7;font-size:.8rem;margin-top:.2rem} .footer-col-info a{color:var(--footer-text)} .footer-col-info .footer-rss{display:inline-flex;align-items:center;gap:.3rem;text-decoration:none} .footer-col-info .footer-rss:hover{text-decoration:underline} .footer-col-info .footer-rss svg{color:#e8590c} .footer-info-credit a{text-decoration:underline} .site-footer.footer-center .footer-col-info{text-align:center} .site-footer.footer-center .footer-col-info .footer-rss{justify-content:center} .footer-brand-fine{margin:.3rem 0 0;font-size:.8rem;opacity:.7} .footer-social-stack a{display:inline-flex;align-items:center;gap:.45rem} .footer-social-stack svg{width:16px;height:16px} .site-footer.footer-center .footer-social-stack a{justify-content:center} /* Per-category RSS link (bottom-right of the section page) */ .category-rss-wrap{display:flex;justify-content:flex-end;margin:2rem 0 .5rem} .category-rss{display:inline-flex;align-items:center;gap:.35rem;color:var(--muted);text-decoration:none;font-size:.8rem;font-weight:600;opacity:.75;transition:opacity .15s,color .15s} .category-rss:hover{opacity:1;color:#e8590c} .category-rss svg{color:#e8590c} /* Newsletter subscribe button (colour set in Appearance → Colours) */ .nl-submit{background:var(--nl-btn-bg);color:var(--nl-btn-text);border:0;font-weight:700;padding:.6rem 1.2rem;border-radius:var(--btn-radius);cursor:pointer;font:inherit;font-weight:700} .nl-submit:hover{filter:brightness(.94);color:var(--nl-btn-text)} /* Pull-quotes — magazine-style pull-out with a decorative quotation mark */ .article-body blockquote.pullquote, .page-body blockquote.pullquote{ position:relative;border:0;margin:2.2rem 0; background:var(--pq-bg,transparent);border-radius:var(--pq-radius,0); padding:var(--pq-pad,.4rem 0 .4rem 3.6rem); font-family:var(--font-heading);font-weight:700;font-style:normal; font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.3;color:var(--accent); } .article-body blockquote.pullquote::before, .page-body blockquote.pullquote::before{ content:"\201C";position:absolute;left:var(--pq-quote-left,-.2rem);top:.15rem; font-family:Georgia,"Times New Roman",serif;font-size:5rem;line-height:.7; color:var(--accent);opacity:.3; } .article-body blockquote.pullquote p, .page-body blockquote.pullquote p{margin:0} /* Centre-aligned variant when the theme centres article text */ .article-body.text-center blockquote.pullquote{text-align:center;padding:2.6rem 1rem .4rem} .article-body.text-center blockquote.pullquote::before{left:50%;transform:translateX(-50%);top:-.4rem} /* Per-block backgrounds (invert / tint / photo) for layout sections */ .home-section--invert,.home-section--photo{--card-fg-invert:1;padding:2.2rem clamp(1rem,3vw,2.4rem);border-radius:var(--box-radius,10px)} .home-section--tint{padding:2.2rem clamp(1rem,3vw,2.4rem);border-radius:var(--box-radius,10px)} .home-section--invert{background:var(--footer-bg,#14110f)} .home-section--photo{background-size:cover;background-position:center;color:#fff} /* Light text on inverted + photo blocks */ .home-section--invert,.home-section--invert .card-title,.home-section--invert .section-heading, .home-section--invert .card-stand,.home-section--invert .byline,.home-section--invert .section-list-title, .home-section--photo,.home-section--photo .card-title,.home-section--photo .section-heading, .home-section--photo .card-stand,.home-section--photo .byline,.home-section--photo .section-list-title{color:#fff} .home-section--invert .card-stand,.home-section--photo .card-stand, .home-section--invert .byline,.home-section--photo .byline{color:rgba(255,255,255,.82)} .home-section--invert .card-link:hover .card-title,.home-section--photo .card-link:hover .card-title{color:var(--accent)} .home-section--invert .section-heading,.home-section--photo .section-heading{border-color:rgba(255,255,255,.25)} .home-section--invert .section-list-item,.home-section--photo .section-list-item{border-color:rgba(255,255,255,.15)} /* Quote spotlight block — big teaser quote linking to the article */ .section-quote{max-width:820px;margin:1.4rem auto;text-align:center;padding:1rem} .section-quote-link{display:block;text-decoration:none;color:inherit} .section-quote-body{position:relative;border:0;margin:0;padding:2.4rem 0 0;font-family:var(--font-heading);font-weight:800;font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.3;color:var(--text)} .section-quote-body::before{content:"\201C";display:block;font-family:Georgia,"Times New Roman",serif;font-size:5.5rem;line-height:.28;color:var(--accent);margin-bottom:.55rem} .section-quote-link:hover .section-quote-body{color:var(--accent)} .section-quote-src{margin:1.15rem 0 0;font-family:var(--font-heading);font-weight:700;font-size:1.05rem;color:var(--text)} .section-quote-meta{display:inline-flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.9rem;margin-top:1.5rem;font-family:var(--font-heading);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-decoration:none} .section-quote-meta > span{position:relative;color:var(--muted)} .section-quote-meta .sq-cat{color:var(--accent)} .section-quote-meta > span + span::before{content:"";position:absolute;left:-.55rem;top:50%;transform:translateY(-50%);width:1px;height:.9em;background:var(--rule)} .section-quote-meta:hover .sq-cat{text-decoration:underline} /* Quote block on inverted / photo backgrounds */ .home-section--invert .section-quote-body,.home-section--photo .section-quote-body, .home-section--invert .section-quote-src,.home-section--photo .section-quote-src{color:#fff} .home-section--invert .section-quote-meta > span,.home-section--photo .section-quote-meta > span{color:rgba(255,255,255,.78)} .home-section--invert .section-quote-meta > span + span::before,.home-section--photo .section-quote-meta > span + span::before{background:rgba(255,255,255,.3)} /* Teaser-quote mode inside Hero and Spotlight blocks */ .hero-lead-quote{border:0;margin:.2rem 0 0;padding:0;font-family:var(--font-heading);font-weight:800;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.28;color:#fff} .hero-lead-quote::before{content:"\201C";font-family:Georgia,serif;color:var(--accent);font-size:1.4em;line-height:0;vertical-align:-.35em;margin-right:.08em} .hero-lead-qsrc{display:block;margin-top:.6rem;font-family:var(--font-heading);font-weight:700;font-size:.9rem;color:rgba(255,255,255,.88)} .spotlight-quote{border:0;margin:.4rem 0 0;padding:0;font-family:var(--font-heading);font-weight:800;font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.3;color:var(--text)} .spotlight-quote::before{content:"\201C";font-family:Georgia,serif;color:var(--accent);font-size:1.4em;line-height:0;vertical-align:-.35em;margin-right:.08em} .spotlight-qsrc{display:block;margin-top:.6rem;font-family:var(--font-heading);font-weight:700;font-size:.95rem;color:var(--muted)} .home-section--invert .spotlight-quote,.home-section--photo .spotlight-quote{color:#fff} .home-section--invert .spotlight-qsrc,.home-section--photo .spotlight-qsrc{color:rgba(255,255,255,.82)} /* Sidebar "In the news" boxed panel */ .sidebar-box{border:1px solid var(--rule);border-radius:var(--box-radius,10px);overflow:hidden;margin-bottom:1.5rem;background:var(--bg)} .sidebar-box-head{background:var(--accent);color:#fff;font-family:var(--font-heading);font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;padding:.6rem .9rem} .sidebar-box-list{list-style:none;margin:0;padding:0} .sidebar-box-list li{border-top:1px solid var(--rule)} .sidebar-box-list li:first-child{border-top:0} .sidebar-box-list a{display:block;padding:.7rem .9rem;text-decoration:none;color:var(--text)} .sidebar-box-list a:hover{background:var(--lead-tint)} .sidebar-box-list a:hover .sbx-title{color:var(--accent)} .sbx-kicker{display:block;font-family:var(--font-heading);font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:.15rem} .sbx-title{display:block;font-family:var(--font-heading);font-weight:700;font-size:.92rem;line-height:1.25;color:var(--text)} /* Two-tone section divider under headings */ .section-head{position:relative;border-bottom:1px solid var(--rule)} .section-head::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:2.6rem;background:var(--accent)} .home-section--invert .section-head,.home-section--photo .section-head{border-color:rgba(255,255,255,.28)} /* Alternating (duotone) columns block */ .section-duotone{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;border-radius:var(--box-radius,10px);overflow:hidden} .duotone-col{display:block;text-decoration:none;padding:1.8rem 1.5rem;min-height:210px;transition:filter .15s} .duotone-col:hover{filter:brightness(1.07)} .duotone-col.is-dark{background:#14110f;color:#fff} .duotone-col.is-light{background:#f4f0e6;color:var(--text)} .duotone-media{height:150px;background-size:cover;background-position:center;border-radius:6px;margin-bottom:1rem} .duotone-col .kicker{color:var(--accent)} .duotone-title{font-family:var(--font-heading);font-weight:800;font-size:1.25rem;line-height:1.25;margin:.4rem 0 .5rem;color:inherit} .duotone-stand{font-size:.9rem;line-height:1.5;opacity:.85;margin:0 0 .8rem} .duotone-more{font-family:var(--font-heading);font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)} /* Block "Read more" link (bottom-right) */ .section-more{text-align:right;margin-top:1rem} .section-more-link{font-family:var(--font-heading);font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);text-decoration:none} .section-more-link:hover{text-decoration:underline} .home-section--invert .section-more-link,.home-section--photo .section-more-link{color:#fff} /* Chess board block — square tiles, checkerboard colours (grid set inline) */ .section-chess{display:grid;gap:2px;margin:1.2rem auto} .section-chess.has-border{border:6px solid #141414;padding:2px;border-radius:2px} /* Mobile: stack tiles in one 85%-wide column, alternating white then black */ @media (max-width:600px){ .section-chess{grid-template-columns:1fr !important;max-width:85% !important;margin-left:auto !important;margin-right:auto !important} .section-chess .chess-tile:nth-child(odd){background:var(--chess-light,#ffffff) !important;color:var(--chess-light-text,#141414) !important} .section-chess .chess-tile:nth-child(even){background:var(--chess-dark,#141414) !important;color:var(--chess-dark-text,#ffffff) !important} } .chess-tile{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:1rem;overflow:hidden;transition:filter .15s} .chess-tile:hover{filter:brightness(1.12)} .chess-tile.is-black{color:#fff} .chess-tile.is-white{color:#141414} .chess-tile-inner{display:flex;flex-direction:column;gap:.35rem;align-items:center} .chess-kicker{font-family:var(--font-heading);font-weight:700;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .chess-title{font-family:var(--font-heading);font-weight:800;font-size:clamp(.82rem,1.4vw,1.05rem);line-height:1.2} @media (max-width:520px){.section-chess{max-width:100%}.chess-title{font-size:.8rem}} /* Optional tagline line between the title and menu (centred header) */ .site-header.header-center.has-tagline .header-inner{display:flex;flex-direction:column;gap:.3rem;text-align:center;grid-template-columns:none} .header-tagline{font-family:var(--font-heading);font-size:var(--tagline-size,.9rem);color:var(--tagline-color,var(--muted));letter-spacing:.02em;margin:-.15rem 0 .2rem;line-height:1.3} .header-tagline.tagline-italic{font-style:italic} .header-tagline.tagline-normal{font-style:normal} .header-tagline.tagline-uppercase{font-style:normal;text-transform:uppercase;letter-spacing:.12em} .site-header.menu-strip-on.has-tagline .header-tagline{color:var(--tagline-color,var(--header-text,var(--muted)))}