/*
Theme Name: Gillan Ritchie
Theme URI: https://www.gillanritchie.com
Author: Gillan Ritchie
Description: An accessible, editorial block theme for a writer and communications portfolio. WCAG 2.2 AA (text pairs meet AAA 7:1), self-hosted Source Serif 4 and Atkinson Hyperlegible, a pausable typewriter hero, and one shared design system across every page and post.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.6.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: gillan-ritchie
Tags: blog, portfolio, one-column, two-columns, block-patterns, full-site-editing, accessibility-ready, editor-style, custom-colors, wide-blocks
*/

/* =========================================================
   1. Tokens not expressible in theme.json
   ========================================================= */
:root {
	--gr-radius: 12px;
	--gr-focus: #111111;
	--gr-focus-on-dark: #FFFFFF;
	--gr-measure: 720px; /* reading column for article text */
	--gr-transition: 150ms ease;
	--gr-pill: 999px;
}

/* =========================================================
   2. Base & readability
   ========================================================= */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; overflow-wrap: break-word; }
p, li, figcaption { hyphens: manual; }

/* Links inside running text are always underlined (WCAG 1.4.1) */
.wp-block-post-content a:not(.elementor-button):not(.wp-block-button__link),
.entry-content a,
p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.wp-block-post-content a:hover,
p a:hover { text-decoration-thickness: 2px; }

/* =========================================================
   3. Focus — visible everywhere, white on dark bands
   ========================================================= */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--gr-focus);
	outline-offset: 2px;
	border-radius: 2px;
}
.has-accent-background-color :focus-visible,
.has-accent-dark-background-color :focus-visible,
.gr-on-dark :focus-visible { outline-color: var(--gr-focus-on-dark); }

/* Skip link added by WordPress for block themes */
.skip-link.screen-reader-text:focus {
	background: #FFFFFF; color: #111111; font-weight: 700;
	padding: 0.75rem 1.25rem; outline: 3px solid #111111; z-index: 100000;
}

/* Visually hidden but available to screen readers */
.screen-reader-text, .gr-sr-only {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}

/* =========================================================
   4. Buttons — consistent states, ≥44px target
   ========================================================= */
.wp-block-button__link, .wp-element-button, button, input[type="submit"] {
	min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	transition: background-color var(--gr-transition), color var(--gr-transition), border-color var(--gr-transition);
}
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: #111111; border: 2px solid #111111;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: #111111; color: #FFFFFF; }
/* Buttons placed on the navy band invert */
.has-accent-background-color .wp-block-button__link {
	background: #FFFFFF; color: #111111; border-color: #FFFFFF;
}
.has-accent-background-color .wp-block-button__link:hover { background: #E6E6E6; color: #111111; border-color: #E6E6E6; }
.has-accent-background-color a:not(.wp-block-button__link) { color: #FFFFFF; }

/* =========================================================
   4b. Section rhythm & shared utility classes
   ========================================================= */
.gr-main > * { margin-block-start: 0; }
.gr-section { padding-block: var(--wp--preset--spacing--60); }
.gr-section-tight { padding-block: var(--wp--preset--spacing--50); }
.gr-section-top { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); }
.gr-surface { background: #F2F2F2; }
.gr-eyebrow, .gr-page-header .gr-eyebrow {
	font-size: 1.125rem; font-weight: 700; color: #111111; margin-bottom: 0;
}
.gr-eyebrow a { color: #111111; text-decoration: none; }
.gr-eyebrow a:hover { text-decoration: underline; }
.gr-lede { font-size: 1.25rem; line-height: 1.55; color: #4D4D4D; max-width: 60ch; }
.gr-muted { color: #4D4D4D; }
.gr-small { font-size: 1rem; }
.gr-hero-name { font-size: var(--wp--preset--font-size--display); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.gr-headshot img { border-radius: var(--gr-radius); width: 100%; }
.gr-headshot { max-width: 440px; }
.gr-about-preview .wp-block-column:first-child { display: flex; justify-content: flex-end; }
@media (max-width: 781px) { .gr-about-preview .wp-block-column:first-child { justify-content: flex-start; } }
.gr-card__body { padding: 1.5rem; gap: 0.75rem; }
.gr-card__body > * { margin: 0; }
.gr-explore-card { padding: 2rem; gap: 0.75rem; align-items: flex-start !important; text-align: left; }
.gr-explore-card > * { margin: 0; }
.gr-explore-card__title { font-size: 1.5rem; }
.gr-explore-card__arrow { font-size: 1.5rem; color: #111111; margin-top: auto !important; }
.gr-post-hero img { border-radius: var(--gr-radius); max-height: 60vh; object-fit: cover; }
.gr-reading-time, .gr-post-meta p { margin: 0; }
.gr-post-meta { gap: 0 !important; }
.gr-back-link a { font-weight: 700; }
.gr-filters { padding: 1.5rem; gap: 1.5rem; align-items: end; margin-bottom: var(--wp--preset--spacing--50); }
.gr-filters > * { margin: 0 !important; }
.gr-filters select { width: 100%; }

/* Header */
.gr-header-inner { padding-block: 0.75rem; gap: 1.5rem; }
.gr-header-inner .wp-block-site-title { margin: 0; }

/* Footer */
.gr-site-footer { border-top: 1px solid #D4D4D4; background: #F2F2F2; }
.gr-footer-inner { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30); }
.gr-footer-heading { font-size: 1.125rem; font-family: var(--wp--preset--font-family--sans); color: #111111; }
.gr-footer-bottom { border-top: 1px solid #D4D4D4; padding-top: 1.5rem; margin-top: 2rem; }
.gr-site-footer .wp-block-navigation, .gr-site-footer .wp-block-navigation__container { gap: 0 !important; }
.gr-site-footer .wp-block-navigation .wp-block-navigation-item__content { padding-block: 0.15rem; min-height: 36px; border-bottom: 0; }
.gr-site-footer .wp-block-navigation [aria-current="page"] { text-decoration: underline; }


/* =========================================================
   4c. Retro ink personality: pill buttons and tags, orange-topped cards
   ========================================================= */
.wp-block-button__link, .wp-element-button, .wp-block-search__button { border-radius: var(--gr-pill) !important; }
.gr-card, .gr-card:hover, .gr-card:focus-within { border-top: 6px solid #111111 !important; }
.gr-card .wp-block-post-featured-image img { border-radius: 0; }
.wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wp-block-post-terms .wp-block-post-terms__separator { display: none; }
.wp-block-post-terms a {
	display: inline-flex; align-items: center; min-height: 32px; padding: 0.25rem 0.85rem;
	background: #E6E6E6; color: #111111; border-radius: var(--gr-pill);
	font-size: 1rem; font-weight: 700; text-decoration: none;
}
.wp-block-post-terms a:hover { background: #111111; color: #FFFFFF; }
.gr-page-header .wp-block-post-terms a { font-size: 1rem; }
.gr-surface .gr-stats dd { color: #111111; }

/* =========================================================
   4d. Page layout inspired by an editorial author site:
   centered header, squiggle-underlined headings, split photo + intro,
   a big statement sentence, two-column bio, soft gray contact band
   ========================================================= */
/* Centered header: name on top, nav below */
.gr-header-inner { padding-block: 1.25rem 0.5rem; gap: 0.5rem !important; align-items: center; }
.gr-header-inner .wp-block-site-title { font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2rem); letter-spacing: 0.01em; text-align: center; }
.gr-header-inner .wp-block-navigation { justify-content: center; }
.gr-header-inner .wp-block-navigation .wp-block-navigation-item__content { font-weight: 400; color: #4D4D4D; }
.gr-header-inner .wp-block-navigation .wp-block-navigation-item__content:hover,
.gr-header-inner .wp-block-navigation [aria-current="page"] { color: #111111; }
@media (max-width: 599px) {
	.gr-header-inner { flex-direction: row !important; justify-content: space-between !important; padding-block: 0.75rem; }
	.gr-header-inner .wp-block-site-title { text-align: left; }
}

/* Hand-drawn squiggle under page titles and section headings (decorative) */
.gr-squiggle,
.gr-page-header h1,
.gr-section > h2.has-text-align-center {
	--gr-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8c10-6 14 4 22 0s12-6 20-2 12 6 20 1 14-6 22-2 14 5 30-1' fill='none' stroke='%23767676' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.gr-squiggle::after,
.gr-page-header h1::after,
.gr-section > h2.has-text-align-center::after {
	content: ""; display: block; width: clamp(6rem, 30%, 9rem); height: 0.75rem; margin-top: 0.35rem;
	background: var(--gr-squiggle) no-repeat left center / contain;
}
.gr-section > h2.has-text-align-center::after { margin-inline: auto; background-position: center; }
.gr-section > h2.gr-ribbon__label::after { content: none; }
.gr-tw-name::after { content: none !important; }

/* Split photo + intro */
.gr-about-split { gap: clamp(2rem, 6vw, 6rem) !important; }
.gr-about-photo { margin: 0; }
.gr-about-photo img { width: 100%; border-radius: 0 !important; }
.gr-about-split .wp-block-column:last-child { max-width: 38rem; }
.gr-about-intro { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.375rem); line-height: 1.6; color: #4D4D4D; }
.gr-about-split h1, .gr-about-split h2 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem) !important; }

/* Big statement sentence */
.gr-statement {
	font-family: var(--wp--preset--font-family--sans);
	font-size: clamp(1.625rem, 1.1rem + 2vw, 2.5rem); line-height: 1.3; font-weight: 400;
	color: #111111; max-width: 32ch;
	margin-block: clamp(4rem, 8vw, 8rem) clamp(2rem, 4vw, 3.5rem) !important;
}
.gr-statement strong { font-weight: 700; }

/* Two-column bio */
.gr-about-body { gap: clamp(2rem, 5vw, 5rem) !important; }
.gr-about-body p { color: #4D4D4D; }

/* About page sits in a full-width column */
.gr-about-page .wp-block-post-content > * { max-width: none; }

/* Soft gray contact band */
.gr-cta-band { text-align: center; }
.gr-cta-icon { display: flex; justify-content: center; margin-bottom: 0.5rem !important; }
.gr-cta-icon svg { width: 3rem; height: 3rem; padding: 0.6rem; border: 2px solid currentColor; border-radius: 50%; color: inherit; }
.gr-cta-text { font-size: 1.25rem; }

/* =========================================================
   4e. Homepage: alternating black and white sections
   ========================================================= */
.gr-light { background: #FFFFFF; color: #111111; }
.gr-dark { background: #111111; color: #FFFFFF; }
.gr-dark :is(h1, h2, h3, h4, h5, h6, cite) { color: #FFFFFF !important; }
.gr-dark p, .gr-dark li, .gr-dark .gr-about-intro { color: #E6E6E6; }           /* 15:1 on black */
.gr-dark a:not(.wp-block-button__link) { color: #FFFFFF; text-decoration: underline; }
.gr-dark :focus-visible { outline-color: #FFFFFF !important; }
.gr-dark .wp-block-button__link { background: #FFFFFF; color: #111111; border-color: #FFFFFF; }
.gr-dark .wp-block-button__link:hover { background: #E6E6E6; border-color: #E6E6E6; color: #111111; }
.gr-dark .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.gr-dark .wp-block-button.is-style-outline .wp-block-button__link:hover { background: #FFFFFF; color: #111111; }
.gr-dark .gr-squiggle, .gr-dark.gr-section > h2.has-text-align-center {
	--gr-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 8c10-6 14 4 22 0s12-6 20-2 12 6 20 1 14-6 22-2 14 5 30-1' fill='none' stroke='%23BDBDBD' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.gr-has-intro .gr-main > .gr-section { margin-block: 0 !important; }

/* Hero: newspaper collage with a black name card */
.gr-hero-collage { position: relative; padding: 0 !important; background: #D9D9D9; overflow: hidden; }
.gr-collage { margin: 0 !important; }
.gr-collage img { display: block; width: 100%; height: clamp(26rem, 78vh, 52rem); object-fit: cover; border-radius: 0 !important; }
.gr-hero-card {
	position: absolute; left: clamp(1.5rem, 6vw, 6rem); bottom: clamp(1.5rem, 8vh, 5rem);
	max-width: 36rem; padding: clamp(1.75rem, 3vw, 2.75rem) !important; margin: 0 !important;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.gr-hero-card > * { margin-block: 0; }
.gr-hero-card .gr-hero-name { font-size: clamp(2.5rem, 1.6rem + 3.4vw, 4.25rem) !important; line-height: 1.05; }
.gr-hero-card .gr-hero-lede { font-size: 1.25rem; line-height: 1.5; margin: 1rem 0 1.5rem !important; }
@media (max-width: 781px) {
	.gr-collage img { height: 50vh; min-height: 18rem; }
	.gr-hero-card { position: static; max-width: none; box-shadow: none; }
}

/* Logo strip (non-moving). Text wordmarks by default; uploaded logos are shown in grayscale. */
.gr-ribbon { border: 0 !important; }
.gr-ribbon__list img { height: 2.5rem; width: auto; filter: grayscale(1); vertical-align: middle; }

/* About on black */
.gr-about-preview.gr-dark { padding-inline: clamp(1.5rem, 4vw, 3rem); }

/* Testimonial */
.gr-testimonial { border: 0 !important; padding: 0 !important; margin: 0 auto !important; text-align: center; }
.gr-testimonial::before {
	content: "\201C"; display: block; font-family: var(--wp--preset--font-family--serif);
	font-size: 6rem; line-height: 0.6; color: #BDBDBD; margin-bottom: 1rem;
}
.gr-testimonial p {
	font-family: var(--wp--preset--font-family--serif) !important; font-style: normal !important;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem) !important; line-height: 1.35; color: #FFFFFF !important;
}
.gr-testimonial cite { display: block; margin-top: 1.5rem; font-style: normal; font-weight: 700; font-size: 1.125rem; }

/* Podcast teaser */
.gr-podcast-split { gap: clamp(2rem, 6vw, 6rem) !important; }
.gr-podcast-split h2 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3rem) !important; }
.gr-podcast-art { margin: 0; }
.gr-podcast-art img { width: 100%; border-radius: 0 !important; }

/* Footer on white to follow the black contact band */
.gr-site-footer { background: #FFFFFF !important; }

/* =========================================================
   5. Header & navigation
   ========================================================= */
.gr-site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid #D4D4D4;
}
@supports (backdrop-filter: blur(4px)) { .gr-site-header { backdrop-filter: blur(4px); } }
.admin-bar .gr-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gr-site-header { top: 46px; } }

.wp-block-navigation .wp-block-navigation-item__content {
	color: #111111; padding: 0.6rem 0.25rem; min-height: 44px; display: inline-flex; align-items: center;
	border-bottom: 3px solid transparent;
}
.wp-block-navigation .wp-block-navigation-item__content:hover { color: #111111; border-bottom-color: #D4D4D4; }
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation [aria-current="page"] { color: #111111; border-bottom-color: #111111; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; }
.wp-block-navigation__responsive-container.is-menu-open { background: #FFFFFF !important; padding: 1.5rem; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; }

/* =========================================================
   6. Typewriter intro: the whole first screen is a sheet of paper
   The sentences are a normal list (editable in the Site Editor);
   theme.js types them out in large typewriter letters.
   ========================================================= */
.gr-tw-hero {
	position: relative;
	min-height: 100vh; min-height: 100svh;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(4rem, 10vh, 6.5rem) clamp(1.5rem, 9vw, 10rem) clamp(1rem, 3vh, 2rem) !important;
	background-color: #FFFFFF;
	/* faint paper grain, decorative */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	border-bottom: 1px solid #D4D4D4;
}
.gr-tw-hero > * { margin-block: 0 !important; }
body.gr-has-intro .gr-main { margin-block-start: 0 !important; }

/* Controls: small, top-right corner of the page */
.gr-tw-controls {
	position: absolute; top: clamp(1rem, 3vh, 1.75rem); right: clamp(1rem, 3vw, 2rem);
	display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem;
}
.gr-tw-controls[hidden] { display: none; }
.gr-tw-btn {
	display: inline-flex; align-items: center; gap: 0.4rem;
	min-height: 32px; padding: 0.25rem 0.5rem; /* 32px tall: above the 24px WCAG 2.2 target minimum */
	background: transparent; color: #4D4D4D; border: 0; border-radius: 4px;
	font: 400 0.9375rem/1 var(--wp--preset--font-family--sans); cursor: pointer;
}
.gr-tw-btn:hover { color: #111111; text-decoration: underline; text-underline-offset: 0.2em; }
.gr-tw-btn[aria-pressed="true"] { color: #111111; font-weight: 700; }
.gr-tw-btn svg { width: 0.8rem; height: 0.8rem; fill: currentColor; flex: none; }
.gr-tw-btn .gr-icon-play { display: none; }
.gr-tw-btn[data-state="play"] .gr-icon-play { display: block; }
.gr-tw-btn[data-state="play"] .gr-icon-pause { display: none; }
.gr-tw-btn[data-action="sound"][aria-pressed="false"] .gr-icon-waves { opacity: 0.35; }
.gr-tw-btn[hidden] { display: none; }
.gr-tw-controls { gap: 0.25rem 0.75rem !important; }

/* The page itself */
.gr-tw-paper {
	position: relative; width: 100%; max-width: none;
	font-family: var(--wp--preset--font-family--typewriter);
	font-size: clamp(1.5rem, min(4vw, 5.9vh), 4.75rem);
	color: #111111;
}
.gr-tw-paper > * { margin-block: 0; }
.gr-tw-name {
	font-family: var(--wp--preset--font-family--typewriter) !important;
	font-size: 0.75em !important; font-weight: 700; line-height: 1.2; letter-spacing: 0; color: #111111;
}
.gr-tw-tagline { font-family: var(--wp--preset--font-family--typewriter); font-size: max(1rem, 0.42em); color: #4D4D4D; margin: 0.35em 0 1.1em !important; }
ul.gr-tw-lines { list-style: none; padding: 0; margin: 0; }
ul.gr-tw-lines li { font-size: 1em; line-height: 1.3; margin: 0 0 0.3em; min-height: 1.3em; white-space: pre-wrap; }
.gr-tw-caret {
	display: inline-block; width: 0.55em; height: 0.12em; margin-left: 0.05em;
	background: #111111; vertical-align: -0.08em;
	animation: gr-blink 1.2s steps(1, end) infinite; /* < 1 blink per second: far below the flash threshold */
}
.gr-tw.is-paused .gr-tw-caret { animation: none; }
.gr-tw.is-done .gr-tw-caret { display: none; }
/* One sentence at a time */
.gr-tw.is-single ul.gr-tw-lines li { display: none; }
.gr-tw.is-single ul.gr-tw-lines li.is-current { display: block; margin: 0; }
.gr-tw.is-single .gr-tw-paper { font-size: clamp(1.75rem, min(5.2vw, 7.5vh), 5.5rem); }
@keyframes gr-blink { 50% { opacity: 0; } }

/* Skip intro: bottom center of the page */
.gr-tw-skip {
	position: relative; align-self: center; margin-top: clamp(1rem, 4vh, 2.5rem) !important;
	display: inline-flex; align-items: center; gap: 0.5rem;
	min-height: 32px; padding: 0.25rem 0.5rem; white-space: nowrap;
	color: #4D4D4D; font-size: 0.9375rem; font-weight: 400; text-decoration: underline; text-underline-offset: 0.2em;
}
.gr-tw-skip svg { width: 0.85rem; height: 0.85rem; }
.gr-tw-skip:hover { color: #111111; }
.gr-tw-skip:hover { text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: no-preference) {
	.gr-tw.is-done .gr-tw-skip svg { animation: gr-nudge 1.4s ease-in-out 3; } /* 3 gentle nudges, then still */
}
@keyframes gr-nudge { 50% { transform: translateY(4px); } }

/* Phones: controls sit above the text instead of in the corner */
@media (max-width: 600px) {
	.gr-tw-hero { padding-top: 1.5rem !important; justify-content: flex-start; }
	.gr-tw-controls { position: static; justify-content: flex-start; margin-bottom: 1.5rem !important; }
	.gr-tw-paper { font-size: clamp(1.5rem, 7vw, 2rem); }
	.gr-tw-skip { align-self: flex-start; margin-top: 1.5rem !important; padding-left: 0; }
}

/* =========================================================
   6b. Splash screen (homepage)
   The typewriter page covers the site, then fades away to reveal it.
   Classes on <html> are set in <head> (see functions.php) and by theme.js.
   ========================================================= */
html.gr-intro-splash:has(body.gr-has-intro) { overflow: hidden; }
html.gr-intro-splash body.gr-has-intro { overflow: hidden; }
html.gr-intro-splash body.gr-has-intro .gr-tw-hero {
	position: fixed; inset: 0; top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 10000; overflow-y: auto; min-height: 0; border-bottom: 0;
}
html.gr-intro-leaving body.gr-has-intro .gr-tw-hero {
	opacity: 0; transform: translateY(-1.5%);
	transition: opacity 500ms ease, transform 500ms ease;
}
html.gr-intro-seen body.gr-has-intro .gr-tw-hero { display: none; }
/* In the splash, the sentence sits centered; Skip intro is pinned to the bottom */
html.gr-intro-splash body.gr-has-intro .gr-tw-skip {
	position: absolute; left: 50%; bottom: clamp(1rem, 4vh, 2.5rem); transform: translateX(-50%); margin: 0 !important;
}
@media (max-width: 600px) {
	html.gr-intro-splash body.gr-has-intro .gr-tw-hero { justify-content: center; padding-top: 6rem !important; padding-bottom: 5rem !important; }
	html.gr-intro-splash body.gr-has-intro .gr-tw-controls { position: absolute; top: 1rem; left: 1.5rem; right: 1.5rem; margin: 0 !important; }
}
#after-intro { scroll-margin-top: 140px; }

/* =========================================================
   7. Publications ribbon
   ========================================================= */
.gr-ribbon { border-block: 1px solid #D4D4D4; }
.gr-ribbon__label {
	font-size: 1.125rem; font-weight: 700; color: #4D4D4D;
}
ul.gr-ribbon__list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
	gap: 0.75rem 2.5rem;
}
ul.gr-ribbon__list li {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem; font-weight: 600; color: #4D4D4D; margin: 0; white-space: nowrap;
}

/* =========================================================
   8. Cards (bylines, press releases, featured, podcasts)
   ========================================================= */
.gr-card {
	position: relative; height: 100%;
	background: #FFFFFF; border: 1px solid #D4D4D4; border-radius: var(--gr-radius);
	box-shadow: var(--wp--preset--shadow--card);
	transition: border-color var(--gr-transition), box-shadow var(--gr-transition);
	display: flex; flex-direction: column;
}
.gr-card:hover, .gr-card:focus-within { border-color: #111111; }
.gr-card .wp-block-post-featured-image { margin: 0; }
.gr-card .wp-block-post-featured-image img {
	aspect-ratio: 3 / 2; width: 100%; object-fit: cover;
	border-radius: var(--gr-radius) var(--gr-radius) 0 0;
}
.gr-card__body { flex: 1; display: flex; flex-direction: column; }
.gr-card__body > .wp-block-read-more { margin-top: auto; }
.gr-card .wp-block-post-title { font-size: 1.375rem; line-height: 1.3; }
.gr-card .wp-block-post-title a:hover { color: #111111; text-decoration: underline; }
.wp-block-read-more { font-weight: 700; text-decoration: underline; }

/* Explore cards: the whole card is clickable via one link (stretched) */
.gr-explore-card { position: relative; }
.gr-explore-card .gr-explore-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--gr-radius); }
.gr-explore-card .gr-explore-card__title a:focus-visible { outline: none; }
.gr-explore-card:has(.gr-explore-card__title a:focus-visible) { outline: 3px solid #111111; outline-offset: 2px; }
.gr-explore-card .gr-explore-card__title a { color: #111111; text-decoration: none; }
.gr-explore-card:hover .gr-explore-card__title a { color: #111111; text-decoration: underline; }

/* Equal-height grids */
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template.is-layout-grid > li > .gr-card { width: 100%; }

/* Hand-made cards (press releases, podcasts): same look as post cards */
.gr-card-grid { gap: 1.5rem !important; }
.gr-card-grid > .gr-card { margin: 0 !important; }
.gr-pill {
	display: inline-flex; align-items: center; min-height: 32px; padding: 0.25rem 0.85rem;
	background: #E6E6E6; color: #111111; border-radius: var(--gr-pill); font-size: 1rem; font-weight: 700;
}
.gr-card-title { font-size: 1.375rem !important; line-height: 1.3; }
.gr-card-title a { color: #111111; text-decoration: none; }
.gr-card-title a:hover { text-decoration: underline; }
.gr-card-date { color: #4D4D4D; font-size: 1rem; }
.gr-card-summary { color: #4D4D4D; }
.gr-card-more { margin-top: auto !important; font-weight: 700; }
.gr-selected-releases { padding-bottom: 0 !important; }
.gr-ep-thumb { margin: 0 !important; }
.gr-ep-thumb img { width: 100%; border-radius: var(--gr-radius) var(--gr-radius) 0 0 !important; display: block; }
.gr-episode-card { overflow: hidden; }
.gr-latest-embed { margin: 0; }
.gr-latest-embed figcaption { text-align: left; margin: 0.75rem 0 0 !important; max-width: none !important; }
.gr-latest-embed iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--gr-radius); }
.gr-latest-episode { padding-bottom: 0 !important; }
/* Podcast media library (sidebar filters + two-column episode grid) */
.gr-media-library { gap: clamp(1.5rem, 4vw, 4rem) !important; }
.gr-media-sidebar { position: sticky; top: 140px; align-self: flex-start; }
.gr-media-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.gr-media-filter {
	background: none; border: 0; padding: 0.4rem 0; min-height: 36px; cursor: pointer; text-align: left;
	font: 400 1.125rem/1.3 var(--wp--preset--font-family--sans); color: #4D4D4D;
}
.gr-media-filter:hover { color: #111111; text-decoration: underline; text-underline-offset: 0.2em; }
.gr-media-filter[aria-pressed="true"] { color: #111111; font-weight: 700; }
.gr-media-grid { gap: clamp(2rem, 4vw, 3rem) 2rem !important; }
.gr-media-item { gap: 0.6rem; margin: 0 !important; }
.gr-media-item[hidden] { display: none !important; }
.gr-media-item > * { margin: 0 !important; }
.gr-media-thumb { margin: 0 0 0.75rem !important; position: relative; background: #111111; }
.gr-media-thumb a { display: block; position: relative; }
.gr-media-thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0 !important; }
.gr-media-thumb a::after { /* decorative play button */
	content: ""; position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem; transform: translate(-50%, -50%);
	border-radius: 50%; background: rgba(17, 17, 17, 0.82)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23fff'/%3E%3C/svg%3E") 56% 50% / 45% no-repeat;
	transition: transform var(--gr-transition), background-color var(--gr-transition);
}
.gr-media-thumb a:hover::after, .gr-media-thumb a:focus-visible::after { transform: translate(-50%, -50%) scale(1.08); background-color: #111111; }
.gr-media-thumb a:focus-visible { outline-offset: 3px; }
.gr-media-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.gr-media-meta { color: #4D4D4D; font-size: 1rem; }
.gr-media-title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important; line-height: 1.2; font-weight: 700; }
.gr-media-title a { color: #111111; text-decoration: none; }
.gr-media-title a:hover { text-decoration: underline; }
.gr-media-summary { color: #4D4D4D; }
@media (max-width: 781px) {
	.gr-media-sidebar { position: static; }
	.gr-media-filters { flex-direction: row; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
}



/* =========================================================
   9. Stats
   ========================================================= */
.gr-stats { margin: 0; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); text-align: center; }
.gr-stats div { display: flex; flex-direction: column-reverse; }
.gr-stats dt { font-size: 1.125rem; color: #4D4D4D; font-weight: 700; margin: 0; }
.gr-stats dd {
	margin: 0; font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 700; line-height: 1.05; color: #111111;
}

/* =========================================================
   10. Page header pattern (all interior pages + posts)
   ========================================================= */
.gr-page-header { border-bottom: 1px solid #D4D4D4; }
.gr-page-header .gr-eyebrow { font-size: 1.125rem; font-weight: 700; color: #111111; }
.gr-post-meta { color: #4D4D4D; font-size: 1rem; }
.gr-post-meta > * + *::before { content: "·"; margin-inline: 0.5rem; color: #767676; }

/* =========================================================
   11. Filter bar (category, year, search)
   ========================================================= */
.gr-filters { background: #F2F2F2; border-radius: var(--gr-radius); }
.gr-filters label,
.wp-block-search__label,
.wp-block-categories label,
.wp-block-archives label { font-weight: 700; display: block; margin-bottom: 0.35rem; }

/* =========================================================
   12. Forms (core search + common form plugins)
   ========================================================= */
input[type="text"], input[type="email"], input[type="search"], input[type="tel"], input[type="url"],
input[type="number"], select, textarea,
.wp-block-search__input {
	font: inherit; color: #111111; background: #FFFFFF;
	border: 2px solid #767676; border-radius: var(--gr-radius);
	padding: 0.65rem 0.85rem; min-height: 44px; width: 100%; max-width: 100%;
}
textarea { min-height: 10rem; }
input:hover, select:hover, textarea:hover { border-color: #111111; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: #111111; }
.wp-block-search__inside-wrapper { gap: 0.5rem; border: 0; padding: 0; }
.wp-block-search__button { margin-left: 0; }
/* Error / required hints should never rely on color alone */
[aria-invalid="true"] { border-color: #A4161A !important; border-width: 3px; }
.wpcf7-not-valid-tip, .wpforms-error, .gform_validation_message, .grunion-field-error { color: #A4161A; font-weight: 700; }
.wpcf7-not-valid-tip::before, .wpforms-error::before { content: "Error: "; }

/* =========================================================
   13. WordPress post content normalization
   Old posts were built with Elementor and the classic editor.
   These rules force imported markup to inherit the theme.
   Pages designed in Elementor (body.gr-elementor) are left alone.
   ========================================================= */
body.gr-normalize .wp-block-post-content { font-family: var(--wp--preset--font-family--sans); }
body.gr-normalize .wp-block-post-content :is(p, li, dd, dt, td, th, span, div, blockquote, figcaption, font, strong, em, b, i, small) {
	font-family: inherit !important;
	letter-spacing: normal !important;
}
body.gr-normalize .wp-block-post-content :is(p, li, span, div, td, th, font):not([class*="has-"][class*="-color"]):not([class*="gr-"]) { color: inherit !important; background-color: transparent; }
body.gr-normalize .wp-block-post-content :is(p, li, span, div, font):not([class*="-font-size"]):not([class*="gr-"]) { font-size: inherit !important; line-height: inherit !important; }
body.gr-normalize .wp-block-post-content :is(h1, h2, h3, h4, h5, h6),
body.gr-normalize .wp-block-post-content :is(h1, h2, h3, h4, h5, h6) * {
	font-family: var(--wp--preset--font-family--serif) !important;
	color: #111111 !important; line-height: 1.25 !important; letter-spacing: normal !important;
}
body.gr-normalize .wp-block-post-content h1:not([class*="gr-"]) { font-size: 2rem !important; } /* an h1 in body copy is demoted visually; the post title is the page h1 */
body.gr-normalize .wp-block-post-content h2 { font-size: 1.75rem !important; margin-top: 2.5rem; }
body.gr-normalize .wp-block-post-content h3 { font-size: 1.375rem !important; margin-top: 2rem; }
body.gr-normalize .wp-block-post-content :is(h4, h5, h6) { font-size: 1.125rem !important; margin-top: 1.75rem; }
body.gr-normalize .wp-block-post-content p { margin-block: 0 1.5em; }
body.gr-normalize .wp-block-post-content :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0.75rem; }
body.gr-normalize .wp-block-post-content :is(ul, ol) { padding-left: 1.5em; margin-block: 0 1.5em; }
body.gr-normalize .wp-block-post-content li + li { margin-top: 0.5em; }
body.gr-normalize .wp-block-post-content img { max-width: 100%; height: auto; border-radius: var(--gr-radius); }
body.gr-normalize .wp-block-post-content figure { margin-inline: 0; }
body.gr-normalize .wp-block-post-content figcaption, body.gr-normalize .wp-block-post-content .wp-caption-text {
	color: #4D4D4D !important; font-size: 1rem !important; line-height: 1.5 !important; margin-top: 0.5rem;
}
body.gr-normalize .wp-block-post-content .wp-caption { max-width: 100% !important; }
body.gr-normalize .wp-block-post-content blockquote:not(.wp-block-pullquote blockquote) {
	border-left: 4px solid #111111; margin-inline: 0; padding-left: 1.5rem;
	font-family: var(--wp--preset--font-family--serif) !important; font-size: 1.25rem; font-style: normal;
}
body.gr-normalize .wp-block-post-content hr { border: 0; border-top: 1px solid #D4D4D4; margin-block: 2.5rem; }
body.gr-normalize .wp-block-post-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
body.gr-normalize .wp-block-post-content :is(th, td) { border: 1px solid #D4D4D4; padding: 0.5rem 0.75rem; text-align: left; }
body.gr-normalize .wp-block-post-content :is(pre, code) { font-size: 0.95rem; background: #F2F2F2; border-radius: 4px; }
body.gr-normalize .wp-block-post-content pre { padding: 1rem; overflow-x: auto; }
body.gr-normalize .wp-block-post-content :is(iframe, video, embed, object) { max-width: 100%; border: 0; }
body.gr-normalize .wp-block-post-content iframe[src*="youtube"], body.gr-normalize .wp-block-post-content iframe[src*="vimeo"] { aspect-ratio: 16 / 9; width: 100%; height: auto; }
body.gr-normalize .wp-block-post-content .aligncenter { margin-inline: auto; display: block; }
@media (min-width: 640px) {
	body.gr-normalize .wp-block-post-content .alignleft { float: left; margin: 0.25rem 1.5rem 1rem 0; max-width: 50%; }
	body.gr-normalize .wp-block-post-content .alignright { float: right; margin: 0.25rem 0 1rem 1.5rem; max-width: 50%; }
}
/* Elementor wrappers: remove fixed widths/paddings so content reflows */
body.gr-normalize .wp-block-post-content :is(.elementor, .elementor-section, .elementor-container, .elementor-column, .elementor-widget-wrap, .elementor-element) {
	width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important;
	background: none !important; display: block !important;
}


/* Elementor-designed pages on the theme's own templates: let sections span the width */
body.gr-elementor .wp-block-post-content > .elementor { max-width: none !important; margin-inline: 0 !important; width: 100%; }
body.gr-elementor .wp-block-post-content.has-global-padding { padding-inline: 0; }
/* Single posts: full width, one column. Text is set a little larger on wide
   screens so long lines stay comfortable to read. */
.gr-post-body { font-size: clamp(1.125rem, 1rem + 0.35vw, 1.375rem); }
.gr-post-body > * { max-width: none !important; }
.gr-article .wp-block-separator { margin-inline: 0 !important; width: 6rem; }

/* Elementor buttons: white text on the indigo accent by default (widget-level colors still win) */
.elementor-button, .elementor-button:hover, .elementor-button:focus { color: #FFFFFF; }
/* Elementor Full Width / Canvas templates */
.gr-classic-template .gr-main > .elementor { width: 100%; }
.skip-link.screen-reader-text:focus {
	clip: auto !important; clip-path: none; height: auto; width: auto;
	position: absolute !important; top: 0.5rem; left: 0.5rem; margin: 0;
}

/* =========================================================
   14. Pagination
   ========================================================= */
.wp-block-query-pagination a, .wp-block-query-pagination .page-numbers {
	min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
	padding: 0 0.75rem; border-radius: var(--gr-radius);
}
.wp-block-query-pagination .page-numbers.current { background: #111111; color: #FFFFFF; }
.wp-block-query-pagination a:hover { background: #F2F2F2; }

/* =========================================================
   15. Footer
   ========================================================= */
.gr-site-footer a { color: #111111; }
.gr-site-footer a:hover { color: #111111; }
.gr-site-footer .wp-block-social-links .wp-social-link a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* =========================================================
   16. Reflow & text-spacing resilience (WCAG 1.4.10, 1.4.12)
   ========================================================= */
img, svg, video { max-width: 100%; height: auto; }
@media (max-width: 781px) { .wp-block-columns .wp-block-column { flex-basis: 100% !important; } }
* { min-width: 0; }

/* =========================================================
   17. Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important; scroll-behavior: auto !important;
	}
	.gr-tw-caret { display: none; }
}

/* Forced colors (Windows High Contrast) */
@media (forced-colors: active) {
	.gr-card, .wp-block-button__link { border: 2px solid CanvasText; }
	.gr-tw-caret { background: CanvasText; }
}

/* Print */
@media print {
	.gr-site-header, .gr-site-footer, .gr-cta-band, .gr-tw-controls, .gr-tw-skip, .wp-block-query-pagination { display: none !important; }
	body { background: #FFFFFF; color: #000000; }
	.wp-block-post-content a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}