/*
 * Sawyer 2026: site styles, ported from the v27 canvas boards in 24-mockup/.
 * Desktop rules follow the 1440 boards; the max-width: 959px block follows the 390 boards.
 */

:root {
	--navy: #142f6e;
	--blue: #2672ae;
	--peri: #dcd9fa;
	--plum: #923e8e;
	--hair: #e2d1e2;
	--meta: #555555;
	--ink: #111111;
	--footer: #2b2b2b;
	--footer-text: #c4c4c4;
	--sub: #a6a6a6;
	--wash: #f4ecf4;
	--white: #ffffff;
	--serif: "Cormorant", Georgia, serif;
	--sans: "Hanken Grotesk", system-ui, sans-serif;
	--mono: ui-monospace, Menlo, monospace;
	/* Side gutter: 120px at 1440, centred 1200px content above that. Percent = containing block. */
	--pad: max(clamp(24px, 8.333vw, 120px), calc((100% - 1200px) / 2));
}

/* Base */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: normal;
	overflow-wrap: break-word;
}
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > .site-footer { margin-top: auto; }
main { display: flex; flex-direction: column; }
img { max-width: 100%; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--blue); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--navy); line-height: normal; }
button, input, select, textarea { font: inherit; }

/* Focus: always visible for keyboard users */
:focus-visible { outline: 3px solid var(--plum); outline-offset: 2px; }
.site-footer :focus-visible { outline-color: var(--peri); }
:focus:not(:focus-visible) { outline: none; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: 8px; top: -100px; z-index: 100;
	padding: 12px 16px; background: var(--white); color: var(--navy);
	border: 2px solid var(--navy); border-radius: 6px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* Header (Main, inner pages, Header-scrolled) */
.site-header { position: relative; z-index: 40; background: var(--white); }
.site-header__bar {
	display: flex; justify-content: space-between; align-items: center;
	padding: 28px var(--pad); border-bottom: 1px solid var(--hair); background: var(--white);
	box-sizing: border-box;
}
.site-name {
	margin: 0; font-family: var(--serif); font-weight: 600;
	font-size: clamp(46px, 4.445vw, 64px); line-height: 1.02; letter-spacing: -0.5px;
	color: var(--navy); text-decoration: none; white-space: nowrap;
}
a.site-name:hover { color: var(--navy); }
.cursor {
	display: inline-block; width: 3px; height: 0.9em; margin-left: 7px; vertical-align: -0.1em;
	background: var(--plum); animation: sawyer-blink 1.1s steps(1, end) infinite;
}
@keyframes sawyer-blink { 50% { opacity: 0; } }
.site-nav { display: flex; gap: 36px; font-size: 17px; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 12px 0; }
.site-nav a:hover { color: var(--blue); }
.site-nav a[aria-current="page"] { padding: 12px 0 10px 0; border-bottom: 2px solid var(--plum); }
.menu-toggle { display: none; }
.menu-toggle .icon-close { display: none; }

/* Scrolling (desktop, site.js): the bar is fixed from the start and shrinks smoothly to a 64px bar
   as the page scrolls; it never leaves the screen. Ben, 2026-10-01: the board's 96px took too much
   of the page. --hdr-full is the measured full height (the wrapper keeps it as a spacer), --hdr-p
   runs 0 to 1 over the first 160px of scroll. */
.site-header.is-fixed { height: var(--hdr-full); }
.site-header.is-fixed .site-header__bar {
	position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0;
	height: calc(var(--hdr-full) - (var(--hdr-full) - 64px) * var(--hdr-p, 0)); padding: 0 var(--pad);
}
.site-header.is-fixed .site-name {
	font-size: calc(clamp(46px, 4.445vw, 64px) * (1 - var(--hdr-p, 0)) + 26px * var(--hdr-p, 0));
	line-height: calc(1.02 - 0.02 * var(--hdr-p, 0)); letter-spacing: calc(-0.5px * (1 - var(--hdr-p, 0)));
}
.site-header.is-fixed .cursor { margin-left: calc(7px - 3px * var(--hdr-p, 0)); }
@media (min-width: 960px) { html { scroll-padding-top: 80px; } }

/* Shared list row: kind label, title, venue */
.rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.row { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
.row[hidden] { display: none; }
.row__kind { font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--meta); }
.row__body { margin: 0; font-size: 18px; line-height: 1.45; }
.row__title { font-weight: 600; }
span.row__title { color: var(--ink); }
.row__meta { color: var(--meta); }

/* Home: hero */
.hero {
	display: flex; gap: 72px; align-items: center;
	padding: 64px var(--pad) 0 var(--pad);
}
.hero__text { display: flex; flex-direction: column; gap: 12px; flex-grow: 1; max-width: 720px; }
.hero__text p { margin: 0; font-size: 22px; line-height: 1.55; color: var(--ink); }
/* The image hangs 90px into the News band (negative bottom margin). The text's asymmetric margins
   keep it centred on the 470px image, as on the board, and stop it ever running under the band
   when it wraps to more lines at narrower widths. Below the 1172px row of the 1440 board the text,
   gap and image scale together (percentages of the row), so the image stops at the text's edge
   and stays beside it down to the phone layout (Ben, 2026-10-01). */
.hero { gap: min(72px, 6.143%); }
.hero > .hero__text { margin: calc(24px + min(90px, 7.679%)) 0 24px 0; }
.hero__img {
	position: relative; flex: 0 0 auto; width: min(380px, 32.42%); height: auto; aspect-ratio: 380 / 470;
	margin-bottom: max(-90px, -7.679%); object-fit: contain;
}

/* Home: News band */
.band { background: var(--peri); border-top: 1px solid var(--hair); }
.news-band {
	display: flex; flex-direction: column; gap: 24px;
	padding: 64px var(--pad);
	margin-right: calc(var(--pad) + min(61px, (100% - 2 * var(--pad)) * 0.05205));
}
.band__head { display: flex; align-items: center; gap: 20px; }
.news-band h2, .research > h2, .request > h2 { margin: 0; font-size: 44px; color: var(--navy); }

/* Home: Research */
.research { display: flex; flex-direction: column; gap: 40px; padding: 80px var(--pad); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.card { display: flex; flex-direction: column; gap: 16px; }
.card__img { width: 100%; height: 360px; object-fit: contain; background: var(--white); }
.card h3 { margin: 0; font-size: 32px; color: var(--navy); }
.card__text { margin: 0; font-size: 17px; line-height: 1.6; }
.card__extra { margin: 0; font-size: 16px; line-height: 1.45; color: var(--meta); }
.card__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.45; }
.card__list .meta { color: var(--meta); }
.card__foot {
	margin: auto 0 0 0; padding-top: 14px; border-top: 1px solid var(--plum);
	min-height: 78px; box-sizing: content-box;
	font-size: 16px; font-weight: 600; line-height: 1.5;
}
div.card__foot { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
div.card__foot p { margin: 0; }

/* Inner page heads (News, Publications, Speaking) */
.page-head { display: flex; flex-direction: column; gap: 20px; padding: 64px var(--pad) 48px var(--pad); }
.page-head h1 { margin: 0; font-size: 56px; line-height: 1.05; color: var(--navy); }
.speaking-page .hero__text { gap: 12px; }

/* Groups: month (News), year (Publications), audience (Speaking) */
.groups { display: flex; flex-direction: column; padding: 0 var(--pad) 64px var(--pad); }
.group { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 40px; align-items: start; }
.group[hidden] { display: none; }
.group h2 { margin: 0; font-size: 32px; line-height: 1.15; color: var(--navy); }
.timeline .rows { padding: 6px 0 48px 32px; border-left: 1px solid var(--hair); }
.years .group, #talks .group { padding: 32px 0; border-top: 1px solid var(--hair); }
.years .rows, #talks .rows { padding-top: 6px; }

/* Publications filters (shown by site.js) */
.filters { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.filters[hidden] { display: none; }
.filter { display: flex; align-items: center; gap: 10px; }
.filter__label { flex: 0 0 130px; font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--meta); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; box-sizing: border-box;
	border: 1px solid var(--navy); border-radius: 22px; background: var(--white); color: var(--navy);
	font-family: var(--sans); font-size: 15px; font-weight: 600; line-height: normal; text-align: left; cursor: pointer;
}
.chip:hover { border-color: var(--blue); color: var(--blue); }
.chip[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.chip[aria-pressed="true"]:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }
.filters-empty { margin: 32px 0 0 0; padding-top: 32px; border-top: 1px solid var(--hair); font-size: 18px; color: var(--meta); }
.filters-empty[hidden] { display: none; }

/* Speaking: request band and form */
.request { display: flex; flex-direction: column; gap: 32px; padding: 64px var(--pad) 80px var(--pad); }
.request-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 32px; max-width: 880px; }
.request-text { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.request-text p { margin: 0; font-size: 18px; line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide, .form-actions { grid-column: 1 / -1; }
.field label { font-size: 15px; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
	min-height: 48px; padding: 0 14px; border: 1px solid var(--meta); border-radius: 6px; background: var(--white);
	font-family: var(--sans); font-size: 17px; color: var(--ink); box-sizing: border-box; width: 100%; margin: 0;
}
.field select { padding: 0 12px; }
.field textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.form-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.button-plum {
	min-height: 48px; padding: 0 24px; background: var(--plum); color: var(--white); border: 0; border-radius: 6px;
	font-family: var(--sans); font-size: 16px; font-weight: 600; cursor: pointer;
}
.button-plum:hover { background: var(--navy); }
.form-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--meta); }

/* Paper page (Paper board; desktop is derived from it) */
.paper { display: flex; flex-direction: column; gap: 22px; padding: 32px var(--pad) 80px var(--pad); }
.paper > * { max-width: 800px; box-sizing: border-box; }
.back-link { align-self: flex-start; display: flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.paper__title { margin: 0; font-size: 48px; line-height: 1.1; color: var(--ink); }
.paper__citation { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.pill {
	align-self: flex-start; display: flex; align-items: center; min-height: 44px; padding: 0 14px; box-sizing: border-box;
	border: 1px solid var(--navy); border-radius: 22px; color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none;
}
.pill:hover { border-color: var(--blue); }
.paper__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 440px; }
.btn {
	display: flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box;
	border-radius: 6px; font-family: var(--sans); font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.btn--plum { background: var(--plum); color: var(--white); border: 1px solid var(--plum); }
.btn--plum:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn--outline { background: var(--white); color: var(--navy); border: 1px solid var(--navy); }
.btn--outline:hover { color: var(--blue); border-color: var(--blue); }
.paper__section { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; border-top: 1px solid var(--hair); }
.paper__section h2 { margin: 0; font-size: 32px; color: var(--navy); }
.cite h3 { margin: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--meta); }
.cite h3.cite__second { margin-top: 8px; }
.cite__apa { margin: 0; font-size: 15px; line-height: 1.6; }
.cite__bibtex {
	margin: 0; padding: 14px; background: var(--wash); border: 1px solid var(--hair); border-radius: 6px;
	font-family: var(--mono); font-size: 12px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink);
}
.copy-btn { align-self: flex-start; padding: 0 20px; }
.copy-btn[hidden] { display: none; }
.abstract p { margin: 0; font-size: 16px; line-height: 1.65; }
.more { gap: 10px; }
.more__link { display: flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.45; }

/* Generic pages: About, Press, Contact, Consulting, 404 */
.page-main { padding: 64px var(--pad) 80px var(--pad); }
.entry { max-width: 760px; font-size: 17px; line-height: 1.6; }
.entry::after { content: ""; display: table; clear: both; }
.entry > * { margin-top: 0; margin-bottom: 1.1em; }
.entry h1 { margin: 0 0 0.5em 0; font-size: 56px; line-height: 1.05; }
.entry h2 { margin: 1.5em 0 0.5em 0; font-size: 32px; line-height: 1.15; }
.entry h3 { margin: 1.4em 0 0.4em 0; font-size: 26px; line-height: 1.2; }
.entry h4 { margin: 1.2em 0 0.4em 0; font-family: var(--sans); font-size: 17px; font-weight: 600; color: var(--ink); }
.entry :is(h1, h2, h3, h4, h5, h6)[style*="color"] { color: var(--navy) !important; }
.entry h4[style*="color"] { color: var(--ink) !important; }
.entry ul, .entry ol { padding-left: 1.3em; }
.entry li + li { margin-top: 0.4em; }
.entry img { height: auto; }
.entry figure { margin-left: 0; margin-right: 0; }
.entry hr { height: 0; margin: 2em 0; border: 0; border-top: 1px solid var(--hair); opacity: 1; }
.entry > figure:first-child img { width: 100%; max-width: 360px; }
.entry .alignright { float: right; margin: 0 0 1rem 1.5rem; max-width: 45%; }
.entry .alignleft { float: left; margin: 0 1.5rem 1rem 0; max-width: 45%; }
.entry .aligncenter { margin-left: auto; margin-right: auto; }
.entry .wp-block-button__link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: 6px; background: var(--plum); color: var(--white); font-weight: 600; text-decoration: none; }

/* Footer */
.site-footer {
	background: var(--footer); color: var(--footer-text);
	padding: 64px var(--pad) 40px var(--pad); display: flex; flex-direction: column; gap: 40px;
}
.site-footer a { color: var(--peri); }
.site-footer a:hover { color: var(--white); }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-col h2 { margin: 0 0 4px 0; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--white); }
.footer-col h3 { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--sub); }
.footer-col h3.footer-past { margin-top: 10px; }
.copyright { margin: 0; font-size: 14px; color: var(--sub); }
.site-footer--short { padding: 32px var(--pad); gap: 12px; }
.footer-short { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-short .copyright { margin-top: 8px; font-size: 13px; }

/* Phone layout: the hero stacks, image under the text (Home-phone board). */
@media (max-width: 959px) {
	.hero { flex-direction: column; align-items: stretch; gap: 18px; margin-bottom: -62px; }
	.hero > .hero__text { max-width: 720px; margin: 0; }
	.hero__img { align-self: center; width: 342px; height: 320px; aspect-ratio: auto; margin-top: 12px; margin-bottom: 0; }
	.news-band { margin-right: calc(50% - 108px); }
}
@media (max-width: 1023px) {
	.cards { grid-template-columns: minmax(0, 1fr); gap: 40px; max-width: 720px; }
	.card__foot { min-height: 0; }
}

/* Phone boards (Home-phone, News-phone, Publications-phone, Speaking-phone, Paper) */
@media (max-width: 959px) {
	.site-header__bar { flex-wrap: wrap; padding: 10px max(16px, calc(var(--pad) - 8px)) 10px var(--pad); }
	.site-name { font-size: 36px; line-height: 1.05; letter-spacing: 0; }
	.cursor { margin-left: 4px; }
	.is-paper .site-name { font-size: 24px; line-height: normal; }
	.is-paper .cursor { display: none; }
	.menu-toggle {
		display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
		background: var(--white); border: 1px solid var(--hair); border-radius: 6px; color: var(--ink); cursor: pointer;
	}
	.site-nav { display: none; }
	.site-header.is-open .site-nav {
		display: flex; flex-direction: column; gap: 0; flex: 0 0 100%; order: 3;
		margin: 10px 0 -10px 0; border-top: 1px solid var(--hair); font-size: 18px;
	}
	.site-header.is-open .site-nav a,
	.site-header.is-open .site-nav a[aria-current="page"] {
		display: flex; align-items: center; min-height: 52px; padding: 0 0 0 14px; border-bottom: 1px solid var(--hair);
		border-left: 3px solid transparent;
	}
	.site-header.is-open .site-nav a:last-child { border-bottom: 0; }
	.site-header.is-open .site-nav a[aria-current="page"] { border-left-color: var(--plum); color: var(--navy); font-weight: 600; }
	.site-header.is-open .menu-toggle .icon-open { display: none; }
	.site-header.is-open .menu-toggle .icon-close { display: block; }

	.hero { padding-top: 24px; }
	.page-head { gap: 12px; padding: 32px var(--pad) 28px var(--pad); }
	.page-head h1 { font-size: 40px; }
	.pubs-page .page-head, .speaking-page .page-head { gap: 16px; }

	.rows { gap: 18px; }
	.row { display: flex; flex-direction: column; gap: 4px; }
	.row__body { font-size: 17px; }
	.hero__text p { font-size: 17px; }

	.groups { padding: 0 var(--pad) 40px var(--pad); }
	.group { display: flex; flex-direction: column; gap: 14px; }
	.group h2 { font-size: 28px; }
	.timeline { margin: 0 var(--pad) 40px var(--pad); padding: 0 0 0 20px; border-left: 1px solid var(--hair); }
	.timeline .group { padding-bottom: 32px; }
	.timeline .rows { padding: 0; border-left: 0; }
	.years .group, #talks .group { padding: 24px 0; }
	.years .rows, #talks .rows { padding-top: 0; }

	.filters { gap: 18px; }
	.filter { flex-direction: column; align-items: flex-start; gap: 10px; }
	.filter__label { flex: none; }
	.chips { gap: 8px; }
	.chip { padding: 0 14px; font-size: 14px; }

	.news-band { gap: 20px; padding: 40px var(--pad); }
	.band__head { gap: 14px; }
	.news-band h2, .research > h2, .request > h2 { font-size: 34px; }
	.research { padding: 40px var(--pad); }
	.card { gap: 14px; }
	.card__img { height: 300px; max-width: 342px; }
	.card h3 { font-size: 28px; }
	.card__text { font-size: 16px; }
	.card__list { gap: 12px; }
	.card__foot { line-height: 1.6; }

	.request { gap: 24px; padding: 40px var(--pad) 48px var(--pad); }
	.request-form { display: flex; flex-direction: column; gap: 18px; }

	.paper { padding: 20px var(--pad) 48px var(--pad); }
	.paper__title { font-size: 36px; }
	.paper__buttons { max-width: none; }
	.paper__section h2 { font-size: 28px; }

	.page-main { padding: 32px var(--pad) 48px var(--pad); }
	.entry h1 { font-size: 40px; }
	.entry h2 { font-size: 28px; }
}

@media (max-width: 699px) {
	:root { --pad: 24px; }
	.site-header__bar { padding: 10px 16px 10px 24px; }
	.hero { padding: 24px 24px 0 24px; }
	.hero__img { max-width: 100%; }
	.card__img { max-width: 100%; }
	.site-footer { padding: 40px 24px 32px 24px; gap: 32px; }
	.footer-cols { display: flex; flex-direction: column; gap: 32px; }
	.footer-col { gap: 10px; }
	.footer-col a { padding: 4px 0; }
	.footer-col h2 { font-size: 14px; }
	.copyright { font-size: 13px; }
	.site-footer--short { padding: 32px 24px; gap: 12px; }
	.footer-short a { padding: 0; }
	.entry .alignright, .entry .alignleft { float: none; margin: 0 0 1rem 0; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cursor { animation: none; }
}

@media print {
	.site-header, .site-footer, .filters, .copy-btn, .request { display: none !important; }
}