/*
Theme Name: Yaz Osho
Theme URI: https://yazosho.com
Author: Yaz Iyabo Osho
Author URI: https://yazosho.com
Description: Editorial block theme for the personal academic website of Dr Yaz Iyabo Osho — research, writing and academic development focused on equity, belonging and change in higher education.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yaz-osho
Tags: block-theme, editorial, one-column, custom-colors, custom-menu, full-site-editing
*/
/* ---------------------------------------------------------------
Baseline
--------------------------------------------------------------- */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
overflow-x: hidden;
}
img {
height: auto;
max-width: 100%;
}
/* ---------------------------------------------------------------
Accessible, visible keyboard focus states
--------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation-item a:focus-visible,
.wp-element-button:focus-visible {
outline: 3px solid var(--wp--preset--color--coral);
outline-offset: 3px;
border-radius: 2px;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100000;
background: var(--wp--preset--color--near-black);
color: var(--wp--preset--color--white);
padding: 0.9rem 1.5rem;
text-decoration: none;
font-weight: 600;
}
.skip-link:focus {
left: 1rem;
top: 1rem;
}
/* ---------------------------------------------------------------
Site header
--------------------------------------------------------------- */
.site-header {
border-bottom: 1px solid rgba(23, 19, 27, 0.12);
}
.site-header .wp-block-navigation {
--wp--custom--nav-link-padding: 0.5rem 0;
}
.site-header .wp-block-navigation-item > a,
.site-header .wp-block-navigation-submenu > .wp-block-navigation-item__content {
text-transform: uppercase;
letter-spacing: 0.04em;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.site-header .wp-block-navigation__submenu-container {
background: var(--wp--preset--color--white);
border: 1px solid rgba(23, 19, 27, 0.12);
}
.header-cta .wp-block-button__link {
white-space: nowrap;
}
/* Mobile menu overlay: keep it editorial, not corporate */
.wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--wp--preset--color--aubergine) !important;
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
color: var(--wp--preset--color--white) !important;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--large);
text-transform: none;
letter-spacing: normal;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
background: transparent;
border: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__submenu-container {
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
}
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-item,
.wp-block-navigation__responsive-container.is-menu-open li.wp-block-navigation-submenu {
margin-left: 0 !important;
margin-right: 0 !important;
align-items: flex-start !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding: 5.5rem 1.75rem 2rem;
}
/* ---------------------------------------------------------------
Hero — single flat grid, reordered per breakpoint via grid-template-areas
so the portrait can sit between the role line and the proposition on
mobile while using a 60/40 text/image split on desktop, without two
different copies of the markup.
--------------------------------------------------------------- */
.hero-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"name"
"role"
"image"
"prop"
"bio"
"cta";
row-gap: 1.25rem;
align-items: start;
}
.hero-grid > .hero-name { grid-area: name; }
.hero-grid > .hero-role { grid-area: role; }
.hero-grid > .hero-image { grid-area: image; }
.hero-grid > .hero-prop { grid-area: prop; }
.hero-grid > .hero-bio { grid-area: bio; }
.hero-grid > .hero-cta { grid-area: cta; }
@media (min-width: 782px) {
.hero-grid {
grid-template-columns: 3fr 2fr;
column-gap: 4rem;
row-gap: 1.25rem;
grid-template-areas:
"name image"
"role image"
"prop image"
"bio image"
"cta image";
}
}
.hero-portrait-frame {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 3px;
max-width: 330px;
}
@media (min-width: 782px) {
.hero-portrait-frame {
max-width: 100%;
}
}
/* The figure wrapping the ![]()
must fill the crop frame itself, or the
frame's aspect-ratio box is reserved but the image inside only takes its
own natural (uncropped) height — which is what let the source photo's
full letterboxed width, purple bars included, show through untouched. */
.hero-portrait-frame figure {
height: 100%;
margin: 0;
display: block;
}
.hero-portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
}
.hero-eyebrow {
font-family: "Courier New", Courier, monospace;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
/* Darkened from the base palette coral (#E45A4F) specifically for small
text on white/cream — plain coral text at this weight/size fails
WCAG AA (3.6:1); this shade holds 4.7:1 while reading as the same hue. */
color: #C2453B;
}
/* ---------------------------------------------------------------
About hero — integrated single grid (heading, statement, portrait,
bio all in one flow), reordered per breakpoint like the homepage
hero so the same markup can put the portrait between the
positioning statement and the biography on mobile, and beside the
text at a strong 65/35 split on desktop. The page's own lives
here; the template's generic post-title is hidden for this page
only (see .page-id-8 rule below) so there is still exactly one H1.
--------------------------------------------------------------- */
.about-hero-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"heading"
"statement"
"portrait"
"bio";
row-gap: 1.25rem;
align-items: start;
}
.about-hero-grid > .about-heading { grid-area: heading; }
.about-hero-grid > .about-statement { grid-area: statement; }
.about-hero-grid > .about-portrait { grid-area: portrait; }
.about-hero-grid > .about-bio { grid-area: bio; }
@media (min-width: 782px) {
.about-hero-grid {
grid-template-columns: 13fr 7fr;
column-gap: 3.5rem;
row-gap: 1.25rem;
grid-template-areas:
"heading portrait"
"statement portrait"
"bio portrait";
}
}
.about-portrait-frame {
position: relative;
z-index: 1;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 3px;
max-width: 300px;
}
@media (min-width: 782px) {
.about-portrait-frame {
max-width: 100%;
}
}
.about-portrait-frame figure {
height: 100%;
margin: 0;
display: block;
}
.about-portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 22%;
}
@media (max-width: 781px) {
.about-portrait-frame {
margin: 0 auto;
}
}
/* ---------------------------------------------------------------
Current roles — a compact inline band, not a CV-style list.
--------------------------------------------------------------- */
.roles-band {
display: flex;
flex-wrap: wrap;
align-items: baseline;
row-gap: 0.5rem;
}
/* The separator lives inside each item's own span (via ::before) rather
than as a standalone element, so it can never be stranded alone at the
start of a wrapped line. */
.roles-band span:not(:first-child)::before {
content: "·";
color: var(--wp--preset--color--coral);
margin: 0 0.85rem;
}
@media (max-width: 599px) {
.roles-band span {
display: block;
width: 100%;
padding-top: 0.6rem;
border-top: 1px solid rgba(23, 19, 27, 0.15);
}
.roles-band span:first-child {
border-top: none;
padding-top: 0;
}
.roles-band span:not(:first-child)::before {
content: none;
}
}
/* ---------------------------------------------------------------
About closing links — properly spaced, not a single dense line.
Matches .quiet-close's size and weight (below) so that, on the
pages where both appear together as one closing-route group, every
link in the group reads at the same size — previously this used
the larger "medium" token with default weight while .quiet-close
used "base" at 600, producing a visible size mismatch within the
same group.
--------------------------------------------------------------- */
.about-closing-links {
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2.5rem;
}
.about-closing-links a {
font-size: var(--wp--preset--font-size--base);
font-weight: 600;
}
@media (max-width: 599px) {
.about-closing-links {
flex-direction: column;
gap: 1.25rem;
}
}
/* ---------------------------------------------------------------
Book feature
--------------------------------------------------------------- */
.book-cover-frame {
box-shadow: 0 1.25rem 3rem rgba(23, 19, 27, 0.25);
border-radius: 2px;
max-width: 280px;
}
@media (max-width: 781px) {
.book-cover-column {
display: flex;
justify-content: center;
}
.book-cover-frame {
max-width: 240px;
}
}
/* ---------------------------------------------------------------
Book page hero — a larger, framed cover treatment distinct from
the compact homepage/writing-page book feature.
--------------------------------------------------------------- */
.book-hero-cover-frame {
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.4);
border-radius: 2px;
max-width: 300px;
margin: 0 auto;
}
/* The frame must stay fitted to the image at every width — the earlier
"max-width: 100%" rule let the frame's column (much wider than the
300px cover) show through as a large empty aubergine rectangle beside
it. Centering the column's content, at all widths, keeps the shadow
hugging the cover itself rather than an oversized invisible box. */
.book-hero-cover-column {
display: flex;
justify-content: center;
}
/* ---------------------------------------------------------------
My work — restrained grid, no card chrome. Two columns on wider
screens; a single full-width column with a visible divider and
generous spacing once the layout gets narrow.
--------------------------------------------------------------- */
.work-areas-grid > * {
border-top: 2px solid var(--wp--preset--color--coral);
padding-top: 1.25rem;
}
@media (max-width: 599px) {
.work-areas-grid.is-layout-grid,
.work-areas-grid {
grid-template-columns: 1fr !important;
row-gap: 2.25rem !important;
}
}
.work-areas-links {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1.75rem;
}
/* ---------------------------------------------------------------
Founder-led initiatives — two panels, identical treatment so
neither Holding the Space nor GEMWA reads as more prominent.
This class is also used on the About page's own founder-work
mention, which is out of scope for the checkpoint, so the base
rule stays exactly as it was; the checkpoint's quieter neutral
hairline is applied only on Home via the .home scope below.
--------------------------------------------------------------- */
.founder-initiative-panel {
border-top: 2px solid var(--wp--preset--color--coral);
padding-top: 1.5rem;
}
/* Refinement: the neutral hairline read as an afterthought. A
full-strength gold rule gives founder-led work real presence
while keeping it out of the teal (research) and aubergine
(book/identity) families — its own place in the colour system,
not a fainter version of someone else's. */
.home .founder-initiative-panel {
border-top: 3px solid var(--wp--preset--color--gold);
padding-top: 1.75rem;
}
.home .founder-panel-name {
font-family: "Courier New", Courier, monospace;
font-size: var(--wp--preset--font-size--small);
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--wp--preset--color--gold);
display: block;
margin-bottom: 0.35rem;
}
.home .founder-initiative-panel a {
color: var(--wp--preset--color--gold);
}
@media (max-width: 781px) {
.founder-initiative-panel + .founder-initiative-panel {
margin-top: 1rem;
}
}
@media (max-width: 599px) {
.work-areas-links {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
/* ---------------------------------------------------------------
Speaking page — a lighter inline term list for "Formats", kept
as its own class (rather than reusing .work-areas-links) so this
fix can't affect the Writing/Book pages that already use that
class. align-items: flex-start is required in the mobile stack —
without it the column layout centres each line by its own width
instead of stacking them flush left.
--------------------------------------------------------------- */
.speaking-formats-list {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 0.5rem 1.75rem;
}
@media (max-width: 599px) {
.speaking-formats-list {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
/* ---------------------------------------------------------------
Research page — structured editorial rows rather than cards.
.theme-row and .study-status are also used, unmodified, by the
Writing and Updates pages (both out of scope for this checkpoint),
so their base rules below are exactly as they were before this
checkpoint. The redesigned, unequal-weight treatment is applied
only under the .page-id-9 (Research) scope, further down.
--------------------------------------------------------------- */
.theme-row {
border-top: 2px solid var(--wp--preset--color--coral);
padding: 2rem 0;
display: grid;
grid-template-columns: 1fr;
row-gap: 0.75rem;
}
.theme-row:first-child {
border-top: none;
padding-top: 0;
}
@media (min-width: 782px) {
.theme-row {
grid-template-columns: 7fr 13fr;
column-gap: 3rem;
align-items: baseline;
}
}
.study-row {
border-top: 1px solid rgba(23, 19, 27, 0.15);
padding: 1.75rem 0;
display: grid;
grid-template-columns: 1fr;
row-gap: 0.6rem;
}
.study-row:first-child {
border-top: none;
padding-top: 0;
}
@media (min-width: 782px) {
.study-row {
grid-template-columns: 7fr 13fr;
column-gap: 3rem;
}
}
.study-status {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--near-black);
}
/* -----------------------------------------------------------------
Research checkpoint redesign — scoped to .page-id-9 only. Themes
are no longer given identical weight: the lead theme carries a
heavier rule and a larger heading; the remaining themes share one
quiet hairline-divided list. Black-led correction: the lead rule
and in-progress status tags are no longer teal — the lead rule is
now warm-black/ink (Research's own "ink framing" identity) and
"Ongoing"/"Current" status tags are coral (the site's "current
activity" colour). "Published" stays aubergine — settled evidence,
scoped separately below. Status tags also pick up the Courier
stack here, as one of the selected-status-label uses.
----------------------------------------------------------------- */
.page-id-9 .theme-row--lead {
border-top: 3px solid var(--wp--preset--color--warm-black);
padding: 2.25rem 0 2.5rem;
}
@media (min-width: 782px) {
.page-id-9 .theme-row--lead h3 {
font-size: var(--wp--preset--font-size--large);
}
}
.page-id-9 .theme-row-list {
border-top: 1px solid rgba(23, 19, 27, 0.16);
}
.page-id-9 .theme-row-list .theme-row {
border-top: 1px solid rgba(23, 19, 27, 0.16);
padding: 1.5rem 0;
}
.page-id-9 .theme-row-list > .theme-row:first-child {
border-top: none;
padding-top: 0;
}
.page-id-9 .theme-row-list .theme-row h3 {
font-size: var(--wp--preset--font-size--base);
}
.page-id-9 .theme-row-list .theme-row p {
font-size: var(--wp--preset--font-size--base);
color: var(--wp--preset--color--warm-ink);
}
.page-id-9 .study-status {
font-family: "Courier New", Courier, monospace;
color: #C2453B;
}
.page-id-9 .study-row--evidence {
border-top: 2px solid var(--wp--preset--color--aubergine);
margin-top: 0.5rem;
padding-top: 2rem;
}
.page-id-9 .study-row--evidence .study-status {
color: var(--wp--preset--color--aubergine);
}
.page-id-9 .study-row--evidence h3 {
font-family: var(--wp--preset--font-family--display);
color: var(--wp--preset--color--aubergine);
}
/* ---------------------------------------------------------------
Footer
--------------------------------------------------------------- */
.site-footer a {
color: var(--wp--preset--color--warm-off-white);
text-decoration-color: rgba(244, 239, 230, 0.45);
}
.site-footer a:hover,
.site-footer a:focus-visible {
text-decoration-color: var(--wp--preset--color--coral);
color: var(--wp--preset--color--coral);
}
.site-footer .wp-block-navigation-item > a {
text-transform: none;
letter-spacing: normal;
font-size: var(--wp--preset--font-size--base);
display: inline-block;
padding: 0.2rem 0;
}
/* Refinement: footer height reduced ~25% overall — this row-gap cut
is the largest single contributor, since it applies per nav item
across two seven-and-four-item columns. */
.site-footer .wp-block-navigation {
row-gap: 0.4rem;
}
@media (max-width: 781px) {
.site-footer .footer-nav-primary,
.site-footer .footer-nav-legal {
margin-top: 1.25rem;
}
}
/* ---------------------------------------------------------------
Responsive spacing — tighten generous editorial padding on small screens
--------------------------------------------------------------- */
@media (max-width: 599px) {
.editorial-section {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
}
/* ---------------------------------------------------------------
GEMWA page — a compact three-term grid ("Connection", "Visibility",
"Mutual support"). Deliberately its own class, not the heavier
.theme-row pattern: with only single short words per item, that
pattern's generous 2rem row padding read as sparse, isolated lines
on mobile. This keeps proportionate, non-stretched spacing instead.
--------------------------------------------------------------- */
.gemwa-focus-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
.gemwa-focus-grid > * {
border-top: 2px solid var(--wp--preset--color--coral);
padding-top: 0.9rem;
}
@media (max-width: 599px) {
.gemwa-focus-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* ---------------------------------------------------------------
Work with Yaz — "Ways to work together" editorial rows. Each item
is a single approved sentence with no separate heading, so the
two-column .theme-row pattern (built for heading + description
pairs) doesn't fit; this is a plain single-column stack of rows
with the same coral-rule divider convention.
--------------------------------------------------------------- */
.enquiry-ways-list > * {
border-top: 2px solid var(--wp--preset--color--coral);
padding: 1.5rem 0;
}
.enquiry-ways-list > *:first-child {
border-top: none;
padding-top: 0;
}
/* ---------------------------------------------------------------
Utility / stub page notice
--------------------------------------------------------------- */
.page-in-progress-note {
border-left: 3px solid var(--wp--preset--color--coral);
padding-left: 1.25rem;
font-style: italic;
}
/* =================================================================
CHECKPOINT REDESIGN — Home + Research + header/footer only
Dot-matrix motif, refined colour roles, organic editorial rhythm.
See the design-review recommendations this maps back to in the
checkpoint report; each block below is commented with its intent
rather than only its mechanics, since the point of this system is
restraint — every rule here exists to be used sparingly.
================================================================= */
/* -----------------------------------------------------------------
Dot matrix. Three hand-placed SVGs (assets/dots/*.svg), each used
in exactly one place on the checkpoint pages. They are painted as
::before pseudo-elements — generated content is not part of the
accessibility tree in any browser, so no aria-hidden is needed for
these to be invisible to assistive technology; nothing here ever
carries information not already present as real text. No
animation is applied, so prefers-reduced-motion has nothing to
suppress by default — the rule is included regardless, as a
deliberate guard against any future addition of motion here.
----------------------------------------------------------------- */
.dot-field {
position: relative;
}
.dot-field::before {
content: "";
position: absolute;
display: block;
pointer-events: none;
background-repeat: no-repeat;
z-index: 0;
}
@media (prefers-reduced-motion: reduce) {
.dot-field::before {
transition: none;
animation: none;
}
}
/* Hero — corrected: a deliberate interrupted matrix (grid-derived,
jittered, selectively omitted, fading dense-to-sparse — see
assets/dots/hero-field.svg) anchored at the portrait's top-right
corner. Critically, this layer now sits BEHIND the portrait
(z-index below .hero-portrait-frame's z-index:1) rather than above
it: the opaque photo itself guarantees no dot can ever render over
Yaz's face, glasses or hair — only the portion extending outside
the frame's rectangle, into the surrounding black ground, is ever
actually visible. A simplified, sparser field is swapped in for
mobile so it reads as considered rather than shrunk into noise. */
.dot-field--hero {
overflow: visible;
}
.dot-field--hero::before {
background-image: url("assets/dots/hero-field-mobile.svg");
background-size: contain;
background-position: top right;
width: 185px;
height: 198px;
top: -2.75rem;
right: -1.5rem;
z-index: 0;
}
@media (min-width: 782px) {
.dot-field--hero::before {
background-image: url("assets/dots/hero-field.svg");
width: 270px;
height: 288px;
top: -3.5rem;
right: -3.5rem;
}
}
/* Research: density fades from dense (individual experiences) to
sparse (institutional scale) — placed as a thin band above the
"Current and selected research" list, never behind text. Hidden
below 600px, where there is no longer room for it not to clutter
the single-column study list. */
.dot-field--density::before {
background-image: url("assets/dots/research-density.svg");
background-size: contain;
background-position: left center;
width: min(100%, 400px);
height: 110px;
top: -2.25rem;
left: 0;
}
@media (max-width: 599px) {
.dot-field--density::before {
display: none;
}
}
/* A small marginal annotation beside the book's "currently editing"
line and the one published citation on Research — a hand-placed
cluster marking a point of evidence, not a repeating pattern.
Positioned in the left margin, so it needs room the single-column
mobile layout doesn't have below 782px. */
.dot-field--citation::before {
background-image: url("assets/dots/citation-mark.svg");
background-size: contain;
width: 58px;
height: 42px;
top: -0.1rem;
left: -4rem;
}
@media (max-width: 781px) {
.dot-field--citation::before {
display: none;
}
}
/* About — one restrained dot-matrix element, the citation-mark family
scaled up slightly, anchored at the portrait's top-right corner
with the same behind-and-outside technique as the Home hero: sits
below the portrait in z-index, so the opaque photo guarantees
nothing ever renders over Yaz's face. */
.dot-field--about {
overflow: visible;
}
/* Propagation pass — Courier extended to existing metadata elements
on Writing, Updates and Book, matching the pattern already
established for Research (.page-id-9), scoped per page so nothing
changes on any page not explicitly listed here. */
.page-id-10 .study-status,
.page-id-14 .study-status {
font-family: "Courier New", Courier, monospace;
}
.book-status-meta {
font-family: "Courier New", Courier, monospace;
}
.dot-field--about::before {
background-image: url("assets/dots/citation-mark.svg");
background-size: contain;
width: 74px;
height: 54px;
top: -1rem;
right: -1rem;
z-index: 0;
}
@media (min-width: 782px) {
.dot-field--about::before {
width: 92px;
height: 67px;
top: -1.25rem;
right: -1.25rem;
}
}
/* -----------------------------------------------------------------
Hero — checkpoint revision. Portrait is smaller and integrated
rather than a dominant hero image; on mobile the reading order now
puts identity, role, proposition and the three quiet routes ahead
of the photograph, so a visitor reads who Yaz is before scrolling
past a large image (previously the portrait sat between the role
line and the proposition sentence on small screens).
----------------------------------------------------------------- */
.hero-grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"name"
"role"
"prop"
"routes"
"image"
"bio";
row-gap: 1.1rem;
align-items: start;
}
.hero-grid > .hero-name { grid-area: name; }
.hero-grid > .hero-role { grid-area: role; }
.hero-grid > .hero-prop { grid-area: prop; }
.hero-grid > .hero-routes { grid-area: routes; }
.hero-grid > .hero-image { grid-area: image; }
.hero-grid > .hero-bio { grid-area: bio; }
/* Courier — selective use only; see the report for the full selector
list. Refined here specifically: lighter weight (set in hero.php),
smaller size, tighter letter-spacing and a taller line-height than
Courier's default so the role line reads as a typewritten
archival note rather than a terminal command. */
.hero-role {
font-family: "Courier New", Courier, monospace;
letter-spacing: 0.01em;
line-height: 1.55;
max-width: 34rem;
}
@media (min-width: 782px) {
.hero-grid {
grid-template-columns: 3fr 1.5fr;
column-gap: 3.5rem;
row-gap: 1.1rem;
grid-template-areas:
"name image"
"role image"
"prop image"
"routes image"
"bio image";
}
}
.hero-portrait-frame {
position: relative;
z-index: 1;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: 3px;
max-width: 310px;
margin: 0.5rem 0 0 auto;
}
@media (min-width: 782px) {
.hero-portrait-frame {
max-width: 340px;
margin-top: 0.25rem;
}
}
.hero-portrait-frame figure {
height: 100%;
margin: 0;
display: block;
}
.hero-portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 32%;
}
.hero-routes {
font-family: var(--wp--preset--font-family--body);
font-size: var(--wp--preset--font-size--small);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hero-routes a {
color: var(--wp--preset--color--warm-paper);
text-decoration-color: rgba(244, 239, 230, 0.4);
}
.hero-routes a:hover,
.hero-routes a:focus-visible {
color: var(--wp--preset--color--coral);
font-weight: 700;
text-decoration-color: currentColor;
}
/* Route-link pairs (hero-routes): prevent an individual link's own
phrase breaking mid-word at narrow widths — the pair may still wrap
to its own line as a whole, just not split internally. Applies to
every page using .hero-routes, not just Initiatives, since the same
wrapping risk exists wherever the component is used. */
@media (max-width: 599px) {
.hero-routes a {
white-space: nowrap;
}
}
/* -----------------------------------------------------------------
Book feature — the page's one reserved aubergine moment. Links set
on white/cream tones rather than plain coral, which fails contrast
at this text size against aubergine (verified 3.95:1; AA needs
4.5:1 for text this size).
----------------------------------------------------------------- */
.book-feature-links a {
color: var(--wp--preset--color--white);
text-decoration-color: rgba(255, 255, 255, 0.55);
font-weight: 600;
}
.book-feature-links a:hover,
.book-feature-links a:focus-visible {
color: #E8AFAA;
text-decoration-color: currentColor;
}
/* -----------------------------------------------------------------
Research and Writing, refined — replaces both the four-equal-card
"My work" grid and the first checkpoint's mirrored Research/
Writing rows. Research is now a composed feature in its own
right, built around the exact current study; Writing is a
separate, visually distinct editorial list.
----------------------------------------------------------------- */
.current-focus-lede {
font-family: var(--wp--preset--font-family--display);
font-style: italic;
font-size: var(--wp--preset--font-size--large);
line-height: 1.4;
color: var(--wp--preset--color--warm-ink);
max-width: 42rem;
}
.kicker {
font-family: "Courier New", Courier, monospace;
font-size: var(--wp--preset--font-size--small);
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--wp--preset--color--near-black);
}
.research-feature {
border-top: 3px solid var(--wp--preset--color--near-black);
padding: 1.75rem 1.75rem 1.75rem 0;
max-width: 38rem;
}
.research-feature h3 {
color: var(--wp--preset--color--aubergine);
}
/* Writing's own section — a plain reading list, not a row that
mirrors Research's structure. Deliberately quieter typography
(no kicker, no rule, no dot field) so the two sections read as
genuinely different kinds of thing, not the same component twice. */
.writing-list-section {
border-top: 1px solid rgba(23, 19, 27, 0.12);
}
.writing-list {
display: flex;
flex-direction: column;
gap: 1.1rem;
max-width: 38rem;
}
.writing-list-title {
font-family: var(--wp--preset--font-family--display);
color: var(--wp--preset--color--near-black);
}
.writing-list-meta {
font-family: "Courier New", Courier, monospace;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--warm-ink);
}
/* -----------------------------------------------------------------
A single, quiet closing line — replaces the repeated full-width
aubergine "closing CTA band" pattern. One sentence, one text link,
no button, no colour band.
----------------------------------------------------------------- */
.quiet-close {
border-top: 1px solid rgba(23, 19, 27, 0.14);
padding-top: 2rem;
font-size: var(--wp--preset--font-size--base);
}
.quiet-close a {
font-weight: 600;
}
/* -----------------------------------------------------------------
Navigation priority — header and footer. Research, Writing and
Book are marked .nav-priority (bold); Updates and Contact in the
header, and Work with Yaz and Contact in the footer, are marked
.nav-quiet. Everything else (About, Speaking, Initiatives) is
left at its existing default weight — this is a two-item opt-in
on each end, not a blanket de-emphasis of every other destination.
Quiet colour holds 5.7:1 on the header's white ground and 6.9:1
on the footer's warm-black ground (recomputed after the black-led
correction moved the footer off aubergine) — comfortably AA.
----------------------------------------------------------------- */
.site-header .wp-block-navigation-item.nav-priority > .wp-block-navigation-item__content,
.site-header .wp-block-navigation-submenu.nav-priority > .wp-block-navigation-item__content,
.site-footer .wp-block-navigation-item.nav-priority > .wp-block-navigation-item__content {
font-weight: 700;
}
.site-header .wp-block-navigation-item.nav-quiet > .wp-block-navigation-item__content {
color: rgba(23, 19, 27, 0.65);
}
.site-footer .wp-block-navigation-item.nav-quiet > .wp-block-navigation-item__content {
color: rgba(237, 230, 214, 0.65);
}
/* Refinement: the header's "Work with Yaz" button (previously a
solid-fill, then an outline button) is now a plain nav link like
every other header destination — no box, no border. Colour is the
only thing that marks it as the enquiry route: coral-aa, the
site's "precise emphasis / requires attention" accent, verified at
4.99:1 on the header's white ground. It keeps nav-priority's bold
weight so it doesn't read as less important than Research/Writing. */
.site-header .wp-block-navigation-item.nav-enquiry > .wp-block-navigation-item__content {
color: #C2453B;
font-weight: 700;
}
.site-header .wp-block-navigation-item.nav-enquiry > .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation-item.nav-enquiry > .wp-block-navigation-item__content:focus-visible {
color: var(--wp--preset--color--aubergine);
}
/* Header CTA — switched from a solid aubergine fill to an outline
button in the block markup (is-style-outline), so the header no
longer competes with the book feature for the page's one aubergine
moment. No new CSS is required beyond ensuring focus remains
visible, which the sitewide :focus-visible rule already covers. */