/* 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 ---------- */ /* Bold uppercase title over a light rule, with a short accent bar at the left — the same treatment as the "RECOMMENDED" block headings, applied consistently to every section, tag, author and search archive. */ .section-header{position:relative;border-bottom:1px solid var(--rule);padding-bottom:1rem;margin-bottom:2rem} .section-header::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;background:var(--accent)} .section-title{font-family:var(--font-heading);font-weight:var(--heading-weight,800);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.1;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;font-style:italic} .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;font-style:italic} /* ---------- Video embeds (YouTube / Vimeo / self-hosted / Reel) ---------- */ .video-embed{position:relative;width:100%;margin:1.6rem auto;background:#000;border-radius:var(--img-radius,4px);overflow:hidden} .video-embed::before{content:"";display:block;padding-top:56.25%} /* 16:9 */ .video-embed iframe,.video-embed video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .video-embed--medium{max-width:720px} .video-embed--small{max-width:480px} .video-embed-fallback{margin:1.2rem 0} @media (max-width:600px){.video-embed{max-width:100%!important}} /* custom widths go full-width on phones */ /* ---------- Reader polls ---------- */ .poll-block{margin:1.6rem 0;padding:1.25rem 1.4rem;border:1px solid var(--border,#e3e3e3);border-radius:var(--img-radius,6px);background:var(--card-bg,#fff)} .poll-question{margin:0 0 .3rem;font-size:1.2rem;line-height:1.25} .poll-intro{margin:0 0 .9rem;color:var(--muted);font-size:.95rem} .poll-options{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-direction:column;gap:.5rem} .poll-option label{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--border,#e3e3e3);border-radius:4px;cursor:pointer;transition:border-color .15s,background .15s} .poll-option label:hover{border-color:var(--accent,#c0392b);background:rgba(0,0,0,.02)} .poll-option input{flex:0 0 auto;margin:0} .poll-hint{font-size:.82rem;color:var(--muted);margin:0 0 .6rem} .poll-actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap} .poll-vote-btn{background:var(--accent,#c0392b);color:#fff;border:0;border-radius:4px;padding:.5rem 1.4rem;font-weight:600;cursor:pointer} .poll-vote-btn:hover{filter:brightness(.94)} .poll-results-link{font-size:.85rem;color:var(--muted);text-decoration:underline} .poll-results{list-style:none;margin:0 0 .7rem;padding:0;display:flex;flex-direction:column;gap:.7rem} .poll-result-top{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.25rem} .poll-opt-label{font-weight:600} .poll-opt-pct{color:var(--accent,#c0392b);font-weight:700} .poll-bar{height:9px;border-radius:5px;background:rgba(0,0,0,.08);overflow:hidden} .poll-bar-fill{display:block;height:100%;background:var(--accent,#c0392b);border-radius:5px;transition:width .5s ease} .poll-opt-count{font-size:.78rem;color:var(--muted);margin-top:.2rem} .poll-total{font-size:.82rem;color:var(--muted);margin:.4rem 0 0} /* Compact sidebar variant */ .poll-sidebar{margin:0;padding:0;border:0;background:transparent} .poll-sidebar .poll-question{font-size:1rem} .poll-sidebar .poll-vote-btn{padding:.4rem 1rem;font-size:.9rem} .poll-sidebar .poll-option label{padding:.4rem .55rem;font-size:.9rem} .poll-page{max-width:640px;margin:2rem auto} /* ---------- Centred CTA button block ---------- */ .section-cta{display:flex;justify-content:center;align-items:center;text-align:center;padding:.4rem 0 1.2rem} .section-cta .hero-cta{margin-left:0!important} .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} /* ---------- Inline picture captions & credits ---------- The wrapper is display:table so it shrink-wraps to the picture, and the caption is a table-caption so its own length can never widen the block. .folio-cap--left / --right decide which side the credit badge sits on and which way the caption's rule and text align. */ .article-body .folio-figure{display:table;margin:1.8rem 0;max-width:100%} .article-body .folio-figure img{display:block;margin:0;height:auto;max-width:100%;border-radius:var(--img-radius)} .article-body .folio-figure[style*="width"] img{width:100%} .article-body .folio-figure-media{display:block;position:relative;line-height:0} .article-body .folio-figure-media a{display:block} /* Credit badge and caption — shared by body figures and gallery pictures. Credit sits on the foot of the picture; the caption runs beneath it. */ .folio-credit{ position:absolute;bottom:0;left:0;max-width:85%; background:rgba(0,0,0,.78);color:#fff; font-family:var(--font-heading);font-size:.68rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;line-height:1.35; padding:.28rem .55rem;text-align:left; } .folio-cap--right .folio-credit{left:auto;right:0;text-align:right} .folio-caption{ display:table-caption;caption-side:bottom; margin-top:.55rem;padding-left:.7rem; border-left:3px solid var(--border,#dcd9d3); font-family:var(--font-body);font-size:.88rem;line-height:1.45; font-style:italic;color:var(--muted);text-align:left; } .folio-cap--right .folio-caption{ padding-left:0;padding-right:.7rem;text-align:right; border-left:0;border-right:3px solid var(--border,#dcd9d3); } /* Flow, mirroring the plain-image float classes */ .article-body .folio-figure--left{float:left;margin:.3rem 1.6rem 1rem 0;max-width:50%} .article-body .folio-figure--right{float:right;margin:.3rem 0 1rem 1.6rem;max-width:50%} .article-body .folio-figure--center{float:none;clear:both;margin:1.8rem auto} /* Inherited from a right-aligned paragraph: sits against the outer margin. */ .article-body .folio-figure--end{float:none;clear:both;margin:1.8rem 0 1.8rem auto} @media (max-width:640px){ .article-body .folio-figure--left,.article-body .folio-figure--right{ float:none;margin:1.4rem auto;max-width:100%;width:auto!important} } .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); } /* Manual drop cap: any letter, anywhere, marked in the editor. Kept separate from the ::first-letter rule above so the two can coexist — an article can open with an automatic drop cap and still have another later on. */ .article-body .dropcap{ 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); } /* If the automatic drop cap is on, don't let the first paragraph take both. */ .article-body.has-drop-cap>p:first-of-type .dropcap{ float:none;font-size:inherit;line-height:inherit;font-weight:inherit;padding:0;color:inherit; } /* Call-to-action button. An inline , so it sits in the run of text and follows whatever alignment its paragraph has. */ /* Uses the existing site-wide button variables, so a CTA written into an article matches every other button on the site and answers to the same Appearance controls: Colours -> "Buttons — colour / text / corner radius". */ .article-body .folio-cta, .folio-cta{ display:inline-block; background:var(--btn-bg,var(--accent));color:var(--btn-text,#fff); font-family:var(--font-heading);font-weight:700; font-size:.82rem;letter-spacing:.06em;text-transform:uppercase; padding:.62rem 1.35rem;margin:.35rem .2rem; border-radius:var(--btn-radius,6px);border:1px solid transparent; text-decoration:none;line-height:1.25; transition:background .15s,color .15s,border-color .15s; } .article-body .folio-cta:hover, .folio-cta:hover{background:transparent;color:var(--btn-bg,var(--accent));border-color:var(--btn-bg,var(--accent));text-decoration:none} /* A CTA on a dark or photographic section needs to stay legible. */ .home-section--invert .folio-cta,.home-section--photo .folio-cta{background:#fff;color:#141414} .home-section--invert .folio-cta:hover,.home-section--photo .folio-cta:hover{background:transparent;color:#fff;border-color:#fff} /* Small italic byline between the title and the standfirst. Deliberately not underlined — it is a credit line, not a call to click. */ .article-byline-under{ font-family:var(--font-body);font-style:italic; font-size:.92rem;line-height:1.4;color:var(--muted); margin:.2rem 0 .7rem; } .article-byline-under a, .article-byline-under .byline-author{color:inherit;text-decoration:none;border-bottom:0} .article-byline-under a:hover, .article-byline-under .byline-author:hover{color:var(--accent);text-decoration:none} .article-byline-under.light{color:rgba(255,255,255,.85)} .article-byline-under.light a:hover{color:#fff} /* ---------- Gallery + lightbox ---------- */ .gallery-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.8rem 1rem;max-width:var(--container);margin-inline:auto} /* display:table shrink-wraps the figure to its picture, and the caption is a table-caption, so however long the wording it can never widen the tile. */ .gallery-item{flex:0 0 auto;display:table;margin:0;max-width:100%} .gallery-media{display:block;position:relative;line-height:0;height:var(--gallery-h,220px)} .gallery-item img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:var(--img-radius);cursor:zoom-in;transition:opacity .2s;display:block} .gallery-item:hover img{opacity:.85} .gallery-item .folio-caption{margin-top:.5rem;font-size:.82rem} @media (max-width:560px){.gallery-media{height:var(--gallery-h-sm,150px)}} .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;z-index:2;background:none;border:0;color:#fff;font-size:2.4rem;cursor:pointer;line-height:1} .lightbox-caption{position:absolute;left:0;right:0;bottom:0;z-index:1; padding:2.4rem 2rem 1.4rem;text-align:center;max-height:30%;overflow:hidden; color:#fff;font-family:var(--font-body);font-size:.95rem;line-height:1.45;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,0) 100%)} .lightbox-text{font-style:italic} .lightbox-credit{display:block;font-family:var(--font-heading);font-size:.68rem;font-weight:700; letter-spacing:.07em;text-transform:uppercase;opacity:.72;margin-bottom:.3rem} .lightbox-credit:empty{display:none} /* ---------- 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 on mobile: see the header block near the end of this file, where the stacked and centred mobile rules live together. They have to sit after the desktop stacked-header rules further down, or source order unwinds them. */ .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.ad-align-left{text-align:left} .ad-slot.ad-align-right{text-align:right} .ad-slot.ad-align-center{text-align:center} /* For block/inline-block ad content (e.g. fixed-width banners), honour alignment too. */ .ad-slot.ad-align-left > a, .ad-slot.ad-align-left > img{margin-right:auto} .ad-slot.ad-align-right > a, .ad-slot.ad-align-right > img{margin-left:auto} .ad-slot.ad-align-center > a, .ad-slot.ad-align-center > img{margin-left:auto;margin-right:auto} .ad-slot > a, .ad-slot > img{display:inline-block} .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:2rem} .article-body::after{content:"";display:none} .paywall-inner{border:2px solid var(--rule);border-top:4px solid var(--accent);border-radius:var(--radius);padding:2rem 1.6rem;text-align:center;background:var(--lead-tint);box-shadow:0 6px 24px rgba(0,0,0,.06)} .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 ---------- */ /* Height follows the "Height" setting (Short/Medium/Tall/Full), with a floor so the title and CTA never get clipped on very short windows. */ .masthead.mh-is-featured{min-height:max(320px,var(--mh-height,70vh))} /* 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%);z-index:2;background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3);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(255,255,255,.32)} .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} /* "trim": cap the right column to the big item's height and let it scroll rather than leaving blank space under the big item. */ .section-magazine.mag--trim{align-items:start} .section-magazine.mag--trim .mag-big{grid-row:span 2;align-self:stretch} .section-magazine.mag--trim .mag-med{max-height:100%;overflow:hidden} /* "fill": stretch the big card so its media/teaser fill the height of the two on the right. */ .section-magazine.mag--fill .mag-big{display:flex} .section-magazine.mag--fill .mag-big > *{flex:1 1 auto;display:flex;flex-direction:column} .section-magazine.mag--fill .mag-big .card-media{flex:1 1 auto;min-height:220px} .section-magazine.mag--fill .mag-big .card-media img{width:100%;height:100%;object-fit:cover} .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)} /* When the section's Background picker (Colour panel / Inverted / Photo) is set, let that chosen colour or photo show through instead of the fixed dark panel. */ .home-section--tint .section-spotlight, .home-section--invert .section-spotlight, .home-section--photo .section-spotlight{background:transparent;box-shadow:none} /* Optional full-bleed: span the whole browser width, edge to edge, no rounded card. */ .home-section--bleed{width:100vw;margin-left:calc(50% - 50vw);border-radius:0} .home-section--bleed .section-spotlight{border-radius:0;box-shadow:none} .spotlight-link{display:grid;grid-template-columns:1.3fr 1fr;color:#fff;text-decoration:none;align-items:stretch} .spotlight-link.spotlight--reverse{grid-template-columns:1fr 1.3fr} .spotlight-link.spotlight--reverse .spotlight-media{order:2} .spotlight-link.spotlight--reverse .spotlight-text{order:1} .spotlight-link.spotlight--fixed{min-height:var(--sec-h,420px)} .spotlight-link.spotlight--fixed .spotlight-media{height:var(--sec-h,420px)} /* Spotlight slider */ .section-spotlight--slider{position:relative} .section-spotlight--slider .spotlight-track{display:flex;overflow:hidden} .section-spotlight--slider .spotlight-slide{flex:0 0 100%;min-width:100%} .section-spotlight--slider .spotlight-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;border:0;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.45);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center} .section-spotlight--slider .spotlight-nav:hover{background:rgba(0,0,0,.7)} .section-spotlight--slider .spotlight-prev{left:12px} .section-spotlight--slider .spotlight-next{right:12px} .section-spotlight--slider .spotlight-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:.4rem;justify-content:center;z-index:3} .section-spotlight--slider .spotlight-dot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0} .section-spotlight--slider .spotlight-dot.is-active{background:#fff} .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-pullquote,var(--font-heading));font-weight:var(--pq-weight,700);font-style:normal; font-size:var(--pq-size,clamp(1.35rem,2.4vw,1.9rem));line-height:1.3;color:var(--pq-color,var(--accent)); } /* Pull-quote style variants (set from Appearance) */ .pq-italic .article-body blockquote.pullquote, .pq-italic .page-body blockquote.pullquote{font-style:italic} .pq-uppercase .article-body blockquote.pullquote, .pq-uppercase .page-body blockquote.pullquote{text-transform:uppercase;letter-spacing:.06em} .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(--pq-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(var(--duo-cols,3),1fr);gap:0;border-radius:var(--box-radius,10px);overflow:hidden} .section-duotone{align-items:stretch} .section-duotone .duotone-col{display:flex;flex-direction:column} .section-duotone--fixed .duotone-col{min-height:var(--sec-h,320px)} /* On phones, alternating-colour columns stack into a single column. */ @media (max-width:640px){ .section-duotone{grid-template-columns:1fr} .section-duotone--fixed .duotone-col{min-height:0} } .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)} /* The picture is shown whole, at its own proportions. It used to be a background on a fixed 150px-tall box with background-size:cover, which cropped anything that wasn't a wide landscape down to a narrow horizontal strip — a portrait or square hero lost its top and bottom entirely. */ .duotone-media{display:block;width:100%;height:auto;object-fit:contain;border-radius:6px;margin-bottom:1rem} /* Fixed-height columns still need a ceiling, or one tall portrait would set the height of the whole row. Capping the height and letting the width follow means the box hugs the picture at its own proportions — nothing is cropped, and there are no letterbox bars either. */ .section-duotone--fixed .duotone-media{ max-height:var(--duo-img-max,260px);width:auto;max-width:100%;margin-inline:auto; } .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-tagline,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)))} /* Tag cloud block (homepage / section) */ .section-tags{display:flex;flex-wrap:wrap;gap:.5rem} /* Most-popular-tags box — horizontal, styled like the sidebar "In the news" box */ .tags-box{border:1px solid var(--rule);border-radius:var(--box-radius,10px);overflow:hidden;margin:1.4rem 0} .tags-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} .tags-box-body{display:flex;flex-wrap:wrap;gap:.5rem;padding:1rem .9rem;background:var(--bg)} .home-section--invert .section-tags .tag-chip,.home-section--photo .section-tags .tag-chip{background:rgba(255,255,255,.14);color:#fff} .home-section--invert .section-tags .tag-chip:hover,.home-section--photo .section-tags .tag-chip:hover{background:var(--accent);color:#fff} /* Stacked centred header: logo → wordmark → tagline → spacer → menu */ .site-header.header-stack .header-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.3rem;grid-template-columns:none} .header-stack .wordmark-stack{display:flex;flex-direction:column;align-items:center;gap:.45rem;line-height:1.05} .header-stack .wordmark-text{display:block} .header-stack .header-spacer{width:100%;flex:0 0 auto} .header-stack .header-nav-wrap{width:100%} .header-stack .site-nav{justify-content:center;flex-wrap:wrap} /* ---------- Centred & stacked mastheads on small screens ---------- These must come after the desktop rules above. The mobile block earlier in this file sets flex-direction:row!important on .header-inner to collapse the bar for a burger menu; the stacked layout had no rule to put it back, and its own display:flex declaration here (later in the file, equal specificity) beat the media query's — so a stacked masthead came out as a flex row and sat hard against the burger on the left. Both layouts now use a three-column grid whose outer columns are equal width, which puts the wordmark at the true centre of the bar however wide the burger or the search control happen to be. Tagline, spacer and menu span the full width on their own rows beneath, so a stacked masthead still reads as stacked on a phone. */ @media (max-width:900px){ .site-header.header-stack .header-inner, .site-header.header-center .header-inner, .site-header.header-center.has-tagline .header-inner{ display:grid; /* minmax(0,…) rather than a bare 1fr: a plain 1fr refuses to shrink below its content, so the burger column (wider than the search icon) would win extra space on a narrow screen and pull the wordmark off centre. With a zero floor the two outer columns stay exactly equal whatever they hold. */ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:.35rem .5rem; align-items:center; justify-items:center; text-align:center; } .site-header.header-stack .burger, .site-header.header-center .burger{grid-column:1;grid-row:1;justify-self:start} .site-header.header-stack .wordmark, .site-header.header-center .wordmark{grid-column:2;grid-row:1;justify-self:center;min-width:0} .site-header.header-stack .header-nav-wrap, .site-header.header-center .header-nav-wrap{grid-column:3;grid-row:1;justify-self:end;width:auto} /* Full-width rows beneath the masthead */ .site-header.header-stack .header-tagline, .site-header.header-center .header-tagline{grid-column:1 / -1;grid-row:2;justify-self:center} .site-header.header-stack .header-spacer, .site-header.header-center .header-spacer{grid-column:1 / -1;grid-row:3} /* The stacked wordmark keeps logo-above-title on a phone */ .header-stack .wordmark-stack{align-items:center;text-align:center;max-width:100%} /* Nothing in the masthead may push the bar wider than the screen */ .header-inner{max-width:100%} .wordmark{min-width:0;max-width:100%;white-space:normal} .wordmark-logo{max-width:100%;object-fit:contain} .header-tagline{max-width:100%;white-space:normal} /* The open menu is positioned against the header, so it must not be trapped by the grid: it stays a full-width row below everything. */ body.nav-open .site-header.header-stack .site-nav, body.nav-open .site-header.header-center .site-nav{grid-column:1 / -1} } /* Admin-only diagnostic banner on article pages */ .admin-diag{max-width:var(--measure);margin:0 auto 1.2rem;padding:.7rem 1rem;border:1px solid var(--rule);border-radius:8px;background:var(--lead-tint);font-size:.9rem;font-family:var(--font-heading)} .admin-diag-warn{border-color:#c0392b;background:#fbeae8;color:#7a241b} .admin-diag-ok{border-color:#2e7d32;background:#eaf4eb;color:#255d28} .admin-diag code{background:rgba(0,0,0,.08);padding:.05rem .3rem;border-radius:4px} /* Members-only signup note in the paywall */ .member-note{font-size:.86rem;line-height:1.5;color:var(--muted);background:var(--lead-tint);border-left:3px solid var(--accent);padding:.6rem .8rem;border-radius:4px;margin:.5rem 0 .8rem;text-align:left} /* Optional section/category intro line */ .section-intro{max-width:var(--measure);margin:.6rem auto 0;color:var(--muted);font-size:1.05rem;line-height:1.5} .section-header .section-intro{margin-left:0} /* Footer tagline: size / colour / typeface / style controls */ .footer-tagline{font-family:var(--font-ftagline,var(--font-body));font-size:var(--ftagline-size,1rem);color:var(--ftagline-color,inherit)} .ftagline-italic{font-style:italic} .ftagline-normal{font-style:normal} .ftagline-uppercase{font-style:normal;text-transform:uppercase;letter-spacing:.12em}