/* The Social Space: base tokens and layout.
 * This replaces what WordPress generated from theme.json and its block library
 * (palette variables, fluid type, constrained layouts, buttons, flex groups),
 * so the component stylesheet tss.css works unchanged. Loaded before tss.css. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/Montserrat-normal-400-800.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/LibreBaskerville-normal-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/LibreBaskerville-italic-400.woff2") format("woff2"); }

:root {
	--wp--preset--color--ink: #141414;
	--wp--preset--color--ivory: #F6F3EE;
	--wp--preset--color--sand: #ECE6DC;
	--wp--preset--color--white: #FFFFFF;
	--wp--preset--color--brass: #B08A4A;
	--wp--preset--color--brass-deep: #8A6A34;
	--wp--preset--color--brass-text: #6B5530;
	--wp--preset--color--gold-light: #D9B97A;
	--wp--preset--color--sage: #C7D3CA;
	--wp--preset--color--sage-mist: #DCE4DE;
	--wp--preset--color--sage-deep: #3F5A4C;
	--wp--preset--color--clay: #8A5A44;
	--wp--preset--color--body: #4A4640;
	--wp--preset--color--line: #CFC8BC;

	--wp--preset--font-family--montserrat: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--wp--preset--font-family--baskerville: "Libre Baskerville", Georgia, serif;

	/* Fluid sizes: same min/max as theme.json, interpolated between 320px and 1600px viewports. */
	--wp--preset--font-size--small: 0.875rem;
	--wp--preset--font-size--base: 1rem;
	--wp--preset--font-size--medium: clamp(1.0625rem, 1.0156rem + 0.2344vw, 1.25rem);
	--wp--preset--font-size--large: clamp(1.25rem, 1.1875rem + 0.3125vw, 1.5rem);
	--wp--preset--font-size--x-large: clamp(2rem, 1.7813rem + 1.0938vw, 2.875rem);
	--wp--preset--font-size--display: clamp(2.5rem, 1.9688rem + 2.6563vw, 4.625rem);

	--wp--style--global--content-size: 760px;
	--wp--style--global--wide-size: 1280px;
	--tss-block-gap: 1.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
/* <picture> only chooses the file (AVIF or WebP); layouts keep treating the <img> as the item. */
picture { display: contents; }
picture > source { display: none; } /* else each <source> becomes an empty grid cell */

body {
	margin: 0;
	padding: 0;
	background: var(--wp--preset--color--ivory);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--wp--preset--color--ink); }
a:hover { color: var(--wp--preset--color--brass-text); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp--preset--font-family--montserrat);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-block: 0 var(--tss-block-gap);
}
h1 { font-size: var(--wp--preset--font-size--display); font-weight: 800; line-height: 1.03; letter-spacing: -0.02em; }
h2 { font-size: var(--wp--preset--font-size--x-large); }
p, ul, ol, figure, details, table, blockquote { margin-block: 0 var(--tss-block-gap); }

/* Buttons (WordPress core/button, styled from theme.json). */
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 0 var(--tss-block-gap); }
.wp-block-button__link, .wp-element-button {
	display: inline-block;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: 2px;
	padding: 1.1rem 1.9rem;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
.wp-block-button__link:hover, .wp-element-button:hover { background: var(--wp--preset--color--brass-text); color: var(--wp--preset--color--white); }

/* Layout stand-ins for WordPress group blocks. Pages: 880px column, 1280px wide. */
.alignwide { max-width: 1280px; margin-inline: auto; }
.tss-section > *, .tss-main--home .tss-section > * { max-width: 1280px; margin-inline: auto; }
.tss-main--page { padding-inline: 5vw; }
.tss-main--page > .tss-page-title { max-width: 880px; margin-inline: auto; }
.tss-main--page > .tss-page-content { max-width: 1280px; margin-inline: auto; }
.tss-page-content > * { max-width: 880px; margin-inline: auto; }
.tss-page-content > .alignwide, .tss-page-content > .tss-section { max-width: 1280px; }
/* One left edge for every block in the 880px column, including narrower text (60ch) and
   components that set their own margins (rate strip); wide sections stay centred. */
.tss-main--page .tss-page-content > * { margin-left: max(0px, calc((100% - 880px) / 2)); margin-right: auto; }
.tss-main--page .tss-page-content > .alignwide,
.tss-main--page .tss-page-content > .tss-section { margin-left: auto; }

/* Side gutters. WordPress added the 5vw root padding to top-level groups; do it explicitly here. */
.tss-section, .tss-footer { padding-inline: 5vw; }
.tss-footer > * { max-width: 1280px; margin-inline: auto; }

/* Header and header-overlay: logo left, navigation right. */
.tss-header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--tss-block-gap); }

/* Section header rows (eyebrow + heading on the left, aside on the right). */
.tss-section__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--tss-block-gap); }

/* Page-to-page crossfade, CSS only (browsers without support just navigate normally). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }