/* ----------------------------------------------------------------------------- * Editorial templates: single article, Discover, archives and search. * Loaded only on those templates (see uz_is_editorial_template()). * -------------------------------------------------------------------------- */ /* --- Pull-quote serif ------------------------------------------------------ * Source Serif 4, italic only. Pull quotes are the one place in the system that * uses a serif, and they are always italic, so only the italic face ships. See * assets/fonts/FONT-LICENSES.md. * -------------------------------------------------------------------------- */ @font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-italic.woff2") format("woff2-variations"); font-weight: 400 600; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= * Elementor global-kit neutralisation * ========================================================================= * Elementor's Default Kit (post 6) prints `.elementor-kit-6 a { color:#7CDCDF }` * and forces Roboto, 70px and uppercase onto h1-h3 through the `elementor-kit-6` * class it adds to . Those selectors have specificity (0,2,0) and beat * plain element rules. * * On these templates the kit's stylesheet is dequeued outright (see * inc/elementor-boundary.php), so this block is belt and braces: it keeps the * native typography correct even if the kit were ever re-enqueued by another * plugin, a cache, or a future Elementor change. It reclaims properties by * specificity only — it dequeues nothing, edits no Elementor data, and has no * effect under any other theme. * ------------------------------------------------------------------------- */ body.uz-body .uz-article a:not(.uz-button):not(.uz-chip), body.uz-body .uz-entry__content a { color: var(--uz-accent); } body.uz-body .uz-article h3, body.uz-body .uz-entry__content h3 { font-family: var(--uz-font-heading); text-transform: none; color: var(--uz-text); } /* H1 and H2 take the Bee Three display face; H3 above deliberately does not. */ body.uz-body .uz-article h1, body.uz-body .uz-article h2, body.uz-body .uz-entry__content h1, body.uz-body .uz-entry__content h2, body.uz-body .uz-page-title, body.uz-body .uz-section-title { font-family: var(--uz-font-bee); font-weight: 600; text-transform: none; color: var(--uz-text); } /* =========================== Archive furniture =========================== */ .uz-archive-head { border-bottom: 1px solid var(--uz-border); } .uz-page-title { font-family: var(--uz-font-bee); font-weight: 600; letter-spacing: 0.005em; font-size: var(--uz-text-3xl); line-height: 1.05; margin-bottom: var(--uz-space-md); max-width: 24ch; } .uz-archive-head .uz-section-lede { max-width: 52ch; } .uz-archive-head__count { margin-top: var(--uz-space-sm); color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-sm); letter-spacing: 0.08em; text-transform: uppercase; } .uz-archive-head__search { max-width: 32rem; margin-block: var(--uz-space-xl) var(--uz-space-lg); } .uz-topics { margin-top: var(--uz-space-md); } .uz-section-title--rule { display: flex; align-items: center; gap: var(--uz-space-lg); font-size: var(--uz-text-xl); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; color: var(--uz-muted-text); margin-bottom: var(--uz-space-xl); } .uz-section-title--rule::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--uz-border); } /* A visually hidden section title must not paint its rule. */ .uz-section-title--rule.screen-reader-text::after { display: none; } /* ======================== Discover featured block ======================== */ /* * align-items: start matters. Left to stretch, the lead card grows to match the * two stacked cards beside it, and because its artwork is contained rather than * cropped that extra height becomes a tall band of blurred backdrop with a * small picture floating in it. */ .uz-featured__grid { display: grid; grid-template-columns: 1fr; gap: var(--uz-gutter); align-items: start; } @media (min-width: 1000px) { .uz-featured__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--uz-space-2xl); } } .uz-featured__lead { min-width: 0; } .uz-featured__side { display: grid; grid-template-columns: 1fr; gap: var(--uz-gutter); margin: 0; padding: 0; list-style: none; min-width: 0; } @media (min-width: 640px) and (max-width: 999px) { .uz-featured__side { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* * The lead card carries the artwork at its own proportions, so the two stacked * cards beside it are usually the taller column. Letting the side list fill the * row keeps the block reading as one composition rather than two ragged halves. */ @media (min-width: 1000px) { .uz-featured__side { align-content: start; } } /* ============================ Search results ============================= */ .uz-container--results { max-width: 900px; } .uz-resultlist { display: grid; gap: var(--uz-space-md); margin: 0; padding: 0; list-style: none; } /* ============================== Pagination =============================== */ .uz-pagination { display: flex; flex-direction: column; align-items: center; gap: var(--uz-space-md); margin-top: var(--uz-space-3xl); padding-top: var(--uz-space-xl); border-top: 1px solid var(--uz-border); } .uz-pagination__status { margin: 0; color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; } .uz-pagination__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--uz-space-xs); margin: 0; padding: 0; list-style: none; } .uz-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: var(--uz-space-2xs); min-width: var(--uz-touch-target); min-height: var(--uz-touch-target); padding-inline: var(--uz-space-md); border: 1px solid var(--uz-border); border-radius: var(--uz-radius-pill); color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-sm); font-weight: 600; text-decoration: none; transition: color var(--uz-duration) var(--uz-ease), border-color var(--uz-duration) var(--uz-ease); } .uz-pagination a.page-numbers:hover { color: var(--uz-warm-white); border-color: var(--uz-border-strong); } /* Current page: fill and weight, not colour alone. */ .uz-pagination .page-numbers.current { background: rgba(67, 216, 255, 0.12); border-color: var(--uz-electric-cyan); color: var(--uz-electric-cyan); font-weight: 700; } .uz-pagination .page-numbers.dots { border-color: transparent; } /* ============================= Empty states ============================== */ .uz-empty { max-width: 46rem; margin-inline: auto; text-align: center; padding-block: var(--uz-space-2xl); } .uz-empty__title { font-family: var(--uz-font-display); font-stretch: 88%; font-size: var(--uz-text-2xl); } /* Qualified: .uz-empty__title is used on an h3 elsewhere, which must not change. */ h2.uz-empty__title { font-family: var(--uz-font-bee); font-weight: 600; font-stretch: normal; font-size: calc(var(--uz-text-2xl) * 1.3); } .uz-empty__lede { color: var(--uz-muted-text); max-width: 44ch; margin-inline: auto; } .uz-empty__search { max-width: 28rem; margin: var(--uz-space-xl) auto; } .uz-empty__subtitle { font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; color: var(--uz-muted-text); } .uz-empty__topics .uz-topics__list { justify-content: center; } .uz-empty__action { margin-top: var(--uz-space-xl); } /* ========================================================================= * * Single article * ========================================================================= */ .uz-article-hero { padding-top: var(--uz-space-3xl); } .uz-article-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uz-space-sm); margin-bottom: var(--uz-space-lg); } .uz-article-hero__readtime { color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; } .uz-article-hero__title { font-family: var(--uz-font-bee); font-weight: 600; font-size: clamp(2.25rem, 1.5rem + 3.4vw, 4.25rem); line-height: 1.0; letter-spacing: 0.005em; margin-bottom: var(--uz-space-lg); text-wrap: balance; } .uz-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uz-space-xs); margin: 0 0 var(--uz-space-2xl); color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-sm); } .uz-byline__link { color: var(--uz-warm-white); text-decoration: none; font-weight: 600; } .uz-byline__link:hover { color: var(--uz-electric-cyan); text-decoration: underline; } .uz-byline__sep { opacity: 0.6; } /* * The lead artwork. Because so many of these images carry the article title in * the artwork itself, the picture is shown whole beneath the real

rather * than behind it. Text over an image that already contains text is the one * arrangement guaranteed to be illegible here. / .uz-article-herofigure { margin: 0 0 var(--uz-space-3xl); } / * On an article the artwork is the subject, so the frame takes the picture's * own proportions and the image fills it exactly — no crop and no letterbox. * The backdrop is still rendered and covers sub-pixel rounding at the edges. * A portrait poster is additionally capped in width so it does not tower over * the reading column on a desktop screen. / .uz-article-herofigure .uz-media { aspect-ratio: var(--uz-media-ratio, 16 / 10); border: 1px solid var(--uz-border); border-radius: var(--uz-radius-lg); } .uz-article-herofigure--portrait .uz-media { max-width: 30rem; margin-inline: auto; } .uz-article-herocaption { margin-top: var(--uz-space-sm); color: var(--uz-muted-text); font-size: var(--uz-text-sm); text-align: center; } / --- Article body layout -------------------------------------------------- * The reading column and the rail each carry .uz-container--editorial, so the * prose sits in exactly the same box as the

and byline in the hero. They * are not nested inside a shared container: that would apply the gutter twice * and offset the body from its own title. * -------------------------------------------------------------------------- / .uz-articlebody { display: grid; grid-template-columns: 1fr; gap: var(--uz-space-xl); padding-bottom: var(--uz-section); } .uz-articlemain { min-width: 0; } / * The contents rail becomes a real side column only where there is room for * one. The reading column stays page-centred and the rail occupies the left * gutter beside it, so the prose does not shift when an article happens to have * enough headings to earn a contents list. / @media (min-width: 1080px) { .uz-articlebody--with-toc { grid-template-columns: minmax(0, 1fr) minmax(0, var(--uz-editorial-max)) minmax(0, 1fr); gap: 0; align-items: start; } .uz-articlebody--with-toc .uz-articlerail { grid-column: 1; justify-self: end; width: min(15rem, 100%); max-width: none; margin-inline: 0; padding-inline: 0 var(--uz-space-xl); position: sticky; top: calc(var(--uz-header-height) + var(--uz-space-lg)); } .uz-articlebody--with-toc .uz-articlemain { grid-column: 2; } .uz-articlerail-inner { max-height: calc(100vh - var(--uz-header-height) - var(--uz-space-3xl)); overflow-y: auto; } } / --- Table of contents ---------------------------------------------------- / .uz-toc { padding-left: var(--uz-space-lg); border-left: 1px solid var(--uz-border); margin-bottom: var(--uz-space-2xl); } / The
is the disclosure control and the heading in one. / .uz-toctitle { display: flex; align-items: center; justify-content: space-between; gap: var(--uz-space-sm); min-height: var(--uz-touch-target); font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); font-weight: 700; letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; color: var(--uz-muted-text); margin-bottom: var(--uz-space-md); cursor: pointer; list-style: none; } .uz-toctitle::-webkit-details-marker { display: none; } / A chevron that states open/closed by shape, never by colour alone. / .uz-toctitle::after { content: ""; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--uz-duration-fast) var(--uz-ease); } .uz-toc[open] > .uz-toctitle::after { transform: rotate(-135deg) translate(-2px, -2px); } @media (min-width: 1080px) { / At rail width it is always a heading; the control adds nothing. / .uz-toctitle { cursor: default; } .uz-toctitle::after { display: none; } } .uz-toclist { list-style: none; margin: 0; padding: 0; counter-reset: none; } .uz-tocitem + .uz-tocitem { margin-top: var(--uz-space-xs); } .uz-tocitem--h3 { padding-left: var(--uz-space-md); } .uz-toclink { display: block; padding-block: var(--uz-space-2xs); color: var(--uz-muted-text); font-size: var(--uz-text-sm); line-height: 1.4; text-decoration: none; transition: color var(--uz-duration-fast) var(--uz-ease); } .uz-toclink:hover { color: var(--uz-warm-white); } / Current section: colour plus weight, never colour alone. / .uz-toclink.is-current { color: var(--uz-electric-cyan); font-weight: 700; } / --- Share ---------------------------------------------------------------- / .uz-share { margin-block: var(--uz-space-xl); } / * These three are semantically H2 but are rendered as 12px uppercase micro * labels, not display headings. Bee Three is a condensed display face and is * unreadable at that size, so they stay on Hanken Grotesk. This is the one * deliberate exception to the site-wide H1/H2 rule. / body.uz-body h2.uz-sharetitle { font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); font-weight: 700; letter-spacing: var(--uz-tracking-caps); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; color: var(--uz-muted-text); margin-bottom: var(--uz-space-sm); } .uz-sharelist { display: flex; flex-wrap: wrap; gap: var(--uz-space-xs); margin: 0; padding: 0; list-style: none; } .uz-sharelink { display: inline-flex; align-items: center; min-height: var(--uz-touch-target); padding-inline: var(--uz-space-md); background: transparent; border: 1px solid var(--uz-border); border-radius: var(--uz-radius-pill); color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-sm); font-weight: 600; text-decoration: none; cursor: pointer; transition: color var(--uz-duration) var(--uz-ease), border-color var(--uz-duration) var(--uz-ease); } .uz-sharelink:hover { color: var(--uz-warm-white); border-color: var(--uz-border-strong); } .uz-sharestatus { margin: var(--uz-space-xs) 0 0; color: var(--uz-muted-text); font-size: var(--uz-text-sm); min-height: 1.5em; } / --- Article body typography ---------------------------------------------- / .uz-entrycontent { font-size: var(--uz-text-lg); line-height: var(--uz-leading-relaxed); color: var(--uz-text); } .uz-entrycontent > + * { margin-top: var(--uz-space-lg); } .uz-entrycontent h2 { margin-top: var(--uz-space-3xl); margin-bottom: var(--uz-space-md); /* Bee Three is condensed: matched to the old face by optical size, not px, so a section heading still outranks bold body copy beneath it. / font-size: calc(var(--uz-text-2xl) 1.55); line-height: 1.12; letter-spacing: 0.035em; /* Anchor targets must clear the sticky header. / scroll-margin-top: calc(var(--uz-header-height) + var(--uz-space-xl)); } .uz-entrycontent h3 { margin-top: var(--uz-space-2xl); margin-bottom: var(--uz-space-sm); font-size: var(--uz-text-xl); scroll-margin-top: calc(var(--uz-header-height) + var(--uz-space-xl)); } .uz-entrycontent h4 { margin-top: var(--uz-space-xl); font-size: var(--uz-text-lg); } .uz-entrycontent p { margin-bottom: 0; } .uz-entrycontent strong { color: var(--uz-warm-white); font-weight: 700; } .uz-entrycontent a { text-decoration: underline; text-underline-offset: 0.2em; } .uz-entrycontent a:hover { color: var(--uz-warm-white); } .uz-entrycontent ul, .uz-entrycontent ol { padding-inline-start: 1.4em; margin-bottom: 0; } .uz-entrycontent li + li { margin-top: var(--uz-space-xs); } .uz-entrycontent li::marker { color: var(--uz-accent); } .uz-entrycontent img { border-radius: var(--uz-radius-md); } .uz-entrycontent figure { margin: var(--uz-space-2xl) 0; } .uz-entrycontent figcaption { margin-top: var(--uz-space-sm); color: var(--uz-muted-text); font-size: var(--uz-text-sm); text-align: center; } .uz-entrycontent hr { border: 0; height: 1px; background: var(--uz-border); margin-block: var(--uz-space-3xl); } .uz-entrycontent code, .uz-entrycontent pre { background: var(--uz-bg-card); border: 1px solid var(--uz-border); border-radius: var(--uz-radius-sm); font-size: var(--uz-text-sm); } .uz-entrycontent code { padding: 0.15em 0.4em; } .uz-entrycontent pre { padding: var(--uz-space-lg); overflow-x: auto; } .uz-entrycontent pre code { background: none; border: 0; padding: 0; } / Wide content must scroll inside itself, never widen the page. / .uz-entrycontent table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; } .uz-entrycontent th, .uz-entrycontent td { padding: var(--uz-space-sm) var(--uz-space-md); border-bottom: 1px solid var(--uz-border); text-align: left; } .uz-entrycontent iframe { max-width: 100%; border-radius: var(--uz-radius-md); } / --- Pull quote ------------------------------------------------------------ * Applied to blockquotes the author actually wrote. Nothing is pulled out of * the prose, duplicated or reworded; this is styling, not editing. * -------------------------------------------------------------------------- / .uz-pullquote { position: relative; margin-block: var(--uz-space-3xl); padding: var(--uz-space-xl) var(--uz-space-xl) var(--uz-space-xl) var(--uz-space-2xl); background: rgba(11, 27, 42, 0.55); border-left: 3px solid var(--uz-electric-cyan); border-radius: 0 var(--uz-radius-lg) var(--uz-radius-lg) 0; overflow: hidden; } .uz-pullquote p { position: relative; z-index: 1; font-family: "Source Serif 4", Georgia, "Times New Roman", serif; font-style: italic; font-size: var(--uz-text-xl); line-height: 1.5; color: var(--uz-warm-white); } .uz-pullquote p:last-child { margin-bottom: 0; } .uz-pullquote cite { display: block; margin-top: var(--uz-space-md); font-family: var(--uz-font-heading); font-style: normal; font-size: var(--uz-text-sm); color: var(--uz-muted-text); } / Decorative quote mark, hidden from assistive technology. / .uz-pullquote::before { content: "\201C"; position: absolute; top: -1.6rem; right: 1rem; font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 9rem; line-height: 1; color: rgba(67, 216, 255, 0.10); pointer-events: none; } / --- Empty / artwork-only fallback ---------------------------------------- / .uz-entryfallback { padding: var(--uz-space-xl); background: var(--uz-bg-card); border: 1px solid var(--uz-border); border-radius: var(--uz-radius-lg); } .uz-entryfallback-lede { color: var(--uz-muted-text); font-size: var(--uz-text-base); } .uz-entryfallback-lede:last-child { margin-bottom: 0; } .uz-factlist { margin: var(--uz-space-lg) 0 0; } .uz-factlistrow { display: flex; flex-wrap: wrap; gap: var(--uz-space-sm); padding-block: var(--uz-space-sm); border-top: 1px solid var(--uz-border); font-size: var(--uz-text-sm); } .uz-factlist dt { flex: 0 0 9rem; color: var(--uz-muted-text); font-family: var(--uz-font-heading); letter-spacing: 0.08em; text-transform: uppercase; font-size: var(--uz-text-xs); padding-top: 0.15em; } .uz-factlist dd { flex: 1 1 12rem; margin: 0; min-width: 0; } / --- Article topics ------------------------------------------------------- / .uz-article-topics { margin-top: var(--uz-space-3xl); padding-top: var(--uz-space-xl); border-top: 1px solid var(--uz-border); } body.uz-body h2.uz-article-topicstitle { font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); font-weight: 700; letter-spacing: var(--uz-tracking-caps); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; color: var(--uz-muted-text); margin-bottom: var(--uz-space-sm); } / --- Previous / next ------------------------------------------------------ / .uz-adjacent { display: grid; grid-template-columns: 1fr; gap: var(--uz-gutter); margin-top: var(--uz-space-3xl); padding-top: var(--uz-space-xl); border-top: 1px solid var(--uz-border); } @media (min-width: 640px) { .uz-adjacent { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .uz-adjacentlink { display: flex; flex-direction: column; gap: var(--uz-space-xs); min-width: 0; padding: var(--uz-space-lg); background: var(--uz-bg-card); border: 1px solid var(--uz-border); border-radius: var(--uz-radius-lg); color: inherit; text-decoration: none; transition: border-color var(--uz-duration) var(--uz-ease), box-shadow var(--uz-duration) var(--uz-ease); } .uz-adjacentlink:hover { border-color: rgba(67, 216, 255, 0.45); box-shadow: var(--uz-glow-cyan); color: inherit; } / When only one neighbour exists it must not stretch across both columns. / .uz-adjacentlink--next:only-child { grid-column: 2; } .uz-adjacentlink--next { text-align: right; } .uz-adjacentlabel { color: var(--uz-muted-text); font-family: var(--uz-font-heading); font-size: var(--uz-text-xs); letter-spacing: var(--uz-tracking-caps); text-transform: uppercase; } .uz-adjacent__title { font-family: var(--uz-font-heading); font-size: var(--uz-text-lg); font-weight: 700; line-height: 1.25; } / --- Related -------------------------------------------------------------- * Relatedness is real, so the count varies: some articles share terms with * three others, some with one, some with none. The grid is sized to what was * actually found rather than leaving empty cells where a recommendation would * have to be invented to fill them. * -------------------------------------------------------------------------- / .uz-related { border-top: 1px solid var(--uz-border); background: var(--uz-bg-raised); } @media (min-width: 640px) { .uz-cardgrid--count-1 { grid-template-columns: minmax(0, 26rem); } .uz-cardgrid--count-2 { grid-template-columns: repeat(2, minmax(0, 26rem)); } } / --- wp_link_pages -------------------------------------------------------- / .uz-pagelinks { display: flex; flex-wrap: wrap; gap: var(--uz-space-xs); align-items: center; margin-top: var(--uz-space-2xl); } .uz-pagelinkslabel { color: var(--uz-muted-text); font-size: var(--uz-text-sm); } .uz-pagelinks a, .uz-pagelinks > span > span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; min-height: 2.5rem; border: 1px solid var(--uz-border); border-radius: var(--uz-radius-pill); text-decoration: none; } / --- Reading progress ------------------------------------------------------ * Created by article.js, and only when the visitor has not asked for reduced * motion. Decorative: it duplicates information the scrollbar already gives. * -------------------------------------------------------------------------- */ .uz-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: calc(var(--uz-z-header) + 1); pointer-events: none; background: transparent; } .uz-progressfill { display: block; height: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--uz-orbit-blue), var(--uz-electric-cyan)); } @media (prefers-reduced-motion: reduce) { .uz-progress { display: none; } }