/*
	San Diego Counseling & Therapy — site stylesheet

	Layout components (spotlight, wrapper, items, button, actions, table, list,
	image) are adapted from "Story" by HTML5 UP:
		Story by HTML5 UP
		html5up.net | @ajlkn
		Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
	Modifications: reduced to the components this site uses, vendor prefixes and
	scroll/load animations removed, colours and type moved to CSS custom
	properties (Coastal Contemporary scheme), header/navigation/footer added.
	Full license: assets/LICENSE-html5up-story.txt
*/

/* Fonts (self-hosted, SIL Open Font License — see assets/fonts/) */

	@font-face {
		font-family: 'Lora';
		font-style: normal;
		font-weight: 500;
		font-display: swap;
		src: url('../fonts/lora-500-latin.woff2') format('woff2');
	}

	@font-face {
		font-family: 'Source Sans 3';
		font-style: normal;
		font-weight: 400 600;
		font-display: swap;
		src: url('../fonts/source-sans-3-latin.woff2') format('woff2');
	}

	@font-face {
		font-family: 'Source Sans 3';
		font-style: italic;
		font-weight: 400;
		font-display: swap;
		src: url('../fonts/source-sans-3-italic-latin.woff2') format('woff2');
	}

/* Tokens */

	:root {
		--color-bg: #FAF8F4;          /* warm white */
		--color-accent: #245C60;      /* deep teal */
		--color-accent-dark: #1A4447; /* teal, hover/pressed */
		--color-sand: #E9E1D5;        /* sand */
		--color-text: #293536;        /* charcoal */
		--color-text-muted: #4A5859;  /* charcoal, secondary text (7:1 on warm white) */
		--color-seaglass: #A8C3BC;    /* decorative only — never for text */
		--color-surface: #FFFFFF;
		--color-border: #DDD5C8;
		--color-focus: #245C60;

		--font-heading: 'Lora', Georgia, 'Times New Roman', serif;
		--font-body: 'Source Sans 3', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;

		--text-base: 1.125rem;        /* 18px */
		--leading: 1.65;
		--measure: 68ch;              /* readable line length */

		--radius: 6px;
		--radius-large: 10px;
		--shadow: 0 1px 3px rgba(41, 53, 54, 0.08);

		--space-1: 0.5rem;
		--space-2: 1rem;
		--space-3: 1.5rem;
		--space-4: 2.5rem;
		--space-5: 4rem;
		--space-6: 6rem;

		--gutter: clamp(1rem, 4vw, 3rem);
		--header-height: 4.5rem;
		--inner-width: 72rem;
	}

/* Reset (Story / Eric Meyer, trimmed) */

	*, *::before, *::after {
		box-sizing: border-box;
	}

	html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
	a, abbr, address, cite, em, img, small, strong, b, u, i, ol, ul, li,
	dl, dt, dd, form, label, table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, figure, figcaption, footer, header, nav, section {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}

	article, aside, figure, footer, header, nav, section, main {
		display: block;
	}

	ol, ul {
		list-style: none;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	img {
		max-width: 100%;
		height: auto;
	}

/* Basic */

	html {
		font-size: 100%;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		scroll-padding-top: calc(var(--header-height) + 1rem);
	}

	body {
		background: var(--color-bg);
		color: var(--color-text);
		font-family: var(--font-body);
		font-size: var(--text-base);
		font-weight: 400;
		line-height: var(--leading);
		overflow-x: hidden;
	}

	@media (prefers-reduced-motion: no-preference) {
		html {
			scroll-behavior: smooth;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		*, *::before, *::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}

/* Type */

	a {
		color: var(--color-accent);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	a:hover {
		color: var(--color-accent-dark);
		text-decoration-thickness: 2px;
	}

	:focus-visible {
		outline: 3px solid var(--color-focus);
		outline-offset: 3px;
		border-radius: 2px;
	}

	strong, b {
		font-weight: 600;
	}

	em, i {
		font-style: italic;
	}

	u {
		text-decoration: underline;
	}

	p {
		margin: 0 0 var(--space-3) 0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: var(--color-text);
		font-family: var(--font-heading);
		font-weight: 500;
		line-height: 1.25;
		margin: 0 0 var(--space-2) 0;
		text-wrap: balance;
	}

	h1 {
		font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
		color: var(--color-accent);
		letter-spacing: -0.01em;
	}

	h2 {
		font-size: clamp(1.55rem, 1.25rem + 1vw, 2rem);
		color: var(--color-accent);
		margin-top: var(--space-4);
	}

	h3 {
		font-size: 1.3rem;
		margin-top: var(--space-4);
	}

	h4 {
		font-family: var(--font-body);
		font-size: 1.05rem;
		font-weight: 600;
		margin-top: var(--space-3);
	}

	h2:first-child, h3:first-child, h4:first-child {
		margin-top: 0;
	}

	small, .small {
		font-size: 0.9rem;
	}

	blockquote {
		border-left: 3px solid var(--color-seaglass);
		font-style: italic;
		margin: 0 0 var(--space-3) 0;
		padding: 0.25rem 0 0.25rem 1.25rem;
	}

	hr {
		border: 0;
		border-bottom: 1px solid var(--color-border);
		margin: var(--space-4) 0;
	}

	.eyebrow {
		color: var(--color-text-muted);
		font-family: var(--font-body);
		font-size: 0.95rem;
		font-weight: 600;
		letter-spacing: 0.06em;
		margin: 0 0 0.6rem 0;
		text-transform: uppercase;
	}

	.lead {
		font-size: 1.25rem;
		line-height: 1.55;
	}

	.note {
		color: var(--color-text-muted);
		font-size: 1rem;
	}

	.visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

/* Skip link */

	.skip-link {
		position: absolute;
		left: var(--space-2);
		top: -10rem;
		z-index: 100;
		background: var(--color-accent);
		color: #fff;
		font-weight: 600;
		padding: 0.75rem 1.25rem;
		border-radius: var(--radius);
		text-decoration: none;
	}

	.skip-link:focus {
		top: var(--space-1);
		color: #fff;
	}

/* Button (Story) */

	.button,
	input[type="submit"],
	button.button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 2.75rem;          /* 44px touch target */
		padding: 0.55rem 1.4rem;
		background: var(--color-accent);
		border: 2px solid var(--color-accent);
		border-radius: var(--radius);
		color: #fff;
		cursor: pointer;
		font-family: var(--font-body);
		font-size: 1.05rem;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
		text-decoration: none;
		transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	}

	.button:hover,
	input[type="submit"]:hover,
	button.button:hover {
		background: var(--color-accent-dark);
		border-color: var(--color-accent-dark);
		color: #fff;
		text-decoration: none;
	}

	.button.secondary {
		background: transparent;
		color: var(--color-accent);
	}

	.button.secondary:hover {
		background: var(--color-accent);
		color: #fff;
	}

	.button.small {
		font-size: 0.98rem;
		padding: 0.45rem 1rem;
	}

/* Actions (Story) */

	ul.actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		margin: 0 0 var(--space-3) 0;
		padding: 0;
		list-style: none;
	}

	ul.actions.special {
		justify-content: center;
	}

	@media screen and (max-width: 30em) {
		ul.actions.stacked-mobile {
			flex-direction: column;
		}

		ul.actions.stacked-mobile .button {
			width: 100%;
		}
	}

/* List (Story) */

	ol {
		list-style: decimal;
		margin: 0 0 var(--space-3) 0;
		padding-left: 1.5em;
	}

	ul {
		list-style: disc;
		margin: 0 0 var(--space-3) 0;
		padding-left: 1.25em;
	}

	li {
		margin-bottom: 0.35rem;
		padding-left: 0.2em;
	}

	li::marker {
		color: var(--color-accent);
	}

	ul.plain {
		list-style: none;
		padding-left: 0;
	}

	ul.plain li {
		padding-left: 0;
	}

	ul.columns {
		columns: 16rem auto;
		column-gap: var(--space-4);
	}

	ul.columns li {
		break-inside: avoid;
	}

	dl {
		margin: 0 0 var(--space-3) 0;
	}

	dt {
		font-weight: 600;
	}

	dd {
		margin: 0 0 var(--space-2) 0;
	}

/* Table (Story) */

	.table-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 0 var(--space-3) 0;
	}

	table {
		width: 100%;
	}

	table th, table td {
		border-bottom: 1px solid var(--color-border);
		padding: 0.75rem 0.75rem 0.75rem 0;
		text-align: left;
		vertical-align: top;
	}

	table th {
		font-weight: 600;
	}

/* Image (Story) */

	.image {
		display: block;
		position: relative;
		border-radius: var(--radius);
	}

	.image img {
		display: block;
		border-radius: var(--radius);
	}

	.image.fit, .image.fit img {
		width: 100%;
	}

	.portrait {
		margin: 0 0 var(--space-3) 0;
	}

	.portrait img {
		display: block;
		width: 11rem;
		height: auto;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		background: var(--color-surface);
		padding: 0.4rem;
	}

/* Header */

	.site-header {
		position: sticky;
		top: 0;
		z-index: 50;
		background: rgba(250, 248, 244, 0.97);
		border-bottom: 1px solid var(--color-border);
	}

	.site-header .bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-2);
		max-width: calc(var(--inner-width) + 2 * var(--gutter));
		min-height: var(--header-height);
		margin: 0 auto;
		padding: 0.5rem var(--gutter);
	}

	.brand {
		display: flex;
		flex-direction: column;
		color: var(--color-text);
		line-height: 1.2;
		text-decoration: none;
		padding: 0.25rem 0;
	}

	.brand:hover {
		color: var(--color-text);
	}

	.brand-name {
		color: var(--color-accent);
		font-family: var(--font-heading);
		font-size: 1.25rem;
		font-weight: 500;
	}

	.brand-sub {
		color: var(--color-text-muted);
		font-size: 0.92rem;
	}

	.header-tools {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}

	.nav-toggle,
	.header-call {
		display: none;
	}

	.site-nav ul {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-nav li {
		margin: 0;
		padding: 0;
	}

	.site-nav a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.25rem 0.8rem;
		border-radius: var(--radius);
		color: var(--color-text);
		font-weight: 600;
		font-size: 1.02rem;
		text-decoration: none;
	}

	.site-nav a:hover {
		background: var(--color-sand);
		color: var(--color-accent-dark);
	}

	.site-nav a[aria-current] {
		color: var(--color-accent);
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.35em;
	}

	.site-nav .nav-cta a {
		background: var(--color-accent);
		color: #fff;
		margin-left: 0.5rem;
		padding: 0.25rem 1.1rem;
	}

	.site-nav .nav-cta a:hover {
		background: var(--color-accent-dark);
		color: #fff;
	}

	.site-nav .nav-cta a[aria-current] {
		text-decoration: none;
	}

	.site-nav .nav-phone {
		display: none;
	}

	/* Compact header: menu button (content-driven: the full nav needs ~60rem) */

	@media screen and (max-width: 62em) {

		.header-tools {
			display: flex;
		}

		.nav-toggle,
		.header-call {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 0.4rem;
			min-height: 2.75rem;
			min-width: 2.75rem;
			padding: 0.4rem 0.85rem;
			border-radius: var(--radius);
			font-family: var(--font-body);
			font-size: 1rem;
			font-weight: 600;
			line-height: 1;
			cursor: pointer;
			text-decoration: none;
		}

		.nav-toggle {
			background: var(--color-surface);
			border: 2px solid var(--color-accent);
			color: var(--color-accent);
		}

		.nav-toggle:hover {
			background: var(--color-sand);
		}

		.no-js .nav-toggle {
			display: none;
		}

		.header-call {
			background: var(--color-accent);
			border: 2px solid var(--color-accent);
			color: #fff;
		}

		.header-call:hover {
			background: var(--color-accent-dark);
			color: #fff;
		}

		.nav-toggle .bars {
			display: inline-block;
			position: relative;
			width: 1.1rem;
			height: 2px;
			background: currentColor;
		}

		.nav-toggle .bars::before,
		.nav-toggle .bars::after {
			content: '';
			position: absolute;
			left: 0;
			width: 100%;
			height: 2px;
			background: currentColor;
		}

		.nav-toggle .bars::before { top: -6px; }
		.nav-toggle .bars::after { top: 6px; }

		.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
		.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
		.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

		.site-header .bar {
			flex-wrap: wrap;
		}

		.brand {
			flex: 1 1 0;
			min-width: 0;
		}

		/* Without JavaScript the nav is simply shown as a wrapped row. */
		.site-nav {
			flex-basis: 100%;
		}

		.js .site-nav {
			display: none;
		}

		.js .site-nav.is-open {
			display: block;
		}

		.site-nav ul {
			flex-direction: column;
			align-items: stretch;
			gap: 0;
			padding: 0.25rem 0 1rem 0;
		}

		.no-js .site-nav ul {
			flex-direction: row;
			flex-wrap: wrap;
		}

		.site-nav a {
			display: flex;
			width: 100%;
			padding: 0.6rem 0.75rem;
			border-bottom: 1px solid var(--color-border);
			border-radius: 0;
		}

		.no-js .site-nav a {
			border-bottom: 0;
			width: auto;
		}

		.site-nav .nav-cta a {
			justify-content: center;
			margin: 0.9rem 0 0 0;
			border-radius: var(--radius);
			border-bottom: 0;
		}

		.site-nav .nav-phone {
			display: block;
		}
	}

	@media screen and (max-width: 30em) {
		.brand-sub {
			display: none;
		}
	}

	@media screen and (max-width: 26em) {
		.brand-name {
			font-size: 1.08rem;
		}

		.header-call .label-long {
			display: none;
		}
	}

/* Wrapper (Story: wrapper style1) */

	.wrapper {
		position: relative;
		padding: var(--space-6) var(--gutter);
	}

	.wrapper > .inner {
		width: 100%;
		max-width: var(--inner-width);
		margin: 0 auto;
	}

	.wrapper > .inner.medium {
		max-width: 52rem;
	}

	.wrapper > .inner.narrow {
		max-width: var(--measure);
	}

	.wrapper.alt {
		background: var(--color-sand);
	}

	.wrapper.tight {
		padding-top: var(--space-5);
		padding-bottom: var(--space-5);
	}

	.wrapper.align-center {
		text-align: center;
	}

	.wrapper.divided + .wrapper.divided {
		border-top: 1px solid var(--color-border);
	}

	.section-intro {
		max-width: var(--measure);
		margin: 0 auto var(--space-4) auto;
	}

	.section-intro h2 {
		margin-top: 0;
	}

	@media screen and (max-width: 46em) {
		.wrapper {
			padding-top: var(--space-5);
			padding-bottom: var(--space-5);
		}
	}

/* Spotlight (Story: spotlight style1, split photo/text) */

	.spotlight {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		position: relative;
		overflow: hidden;
		text-align: left;
	}

	.spotlight .content {
		flex: 1 1 55%;
		align-self: center;
		max-width: 46rem;
		margin: 0 auto;
		padding: var(--space-6) var(--space-5);
	}

	.spotlight .content > :last-child {
		margin-bottom: 0;
	}

	.spotlight .image {
		flex: 0 0 45%;
		min-height: 26rem;
		border-radius: 0;
	}

	.spotlight .image img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
		border-radius: 0;
	}

	.spotlight.orient-right {
		flex-direction: row-reverse;
	}

	.spotlight.image-position-left .image img { object-position: left center; }
	.spotlight.image-position-bottom .image img { object-position: center bottom; }

	.spotlight.alt {
		background: var(--color-sand);
	}

	.spotlight .image::after {
		/* subtle sea-glass rule where photo meets text */
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		width: 6px;
		background: var(--color-seaglass);
	}

	.spotlight.orient-right .image::after {
		left: auto;
		right: 0;
	}

	@media screen and (max-width: 80em) {
		.spotlight .content {
			padding: var(--space-5) var(--space-4);
		}
	}

	/* Stack on narrow viewports and iPad portrait */
	@media screen and (max-width: 56em) {

		.spotlight,
		.spotlight.orient-right {
			flex-direction: column;
		}

		.spotlight .content {
			max-width: none;
			width: 100%;
			padding: var(--space-5) var(--gutter);
		}

		.spotlight .content > * {
			max-width: var(--measure);
		}

		.spotlight .image {
			flex: none;
			width: 100%;
			min-height: 0;
			aspect-ratio: 16 / 7;
		}

		.spotlight .image::after {
			top: 0;
			bottom: auto;
			left: 0;
			right: 0;
			width: auto;
			height: 6px;
		}
	}

	@media screen and (max-width: 30em) {
		.spotlight .image {
			aspect-ratio: 16 / 9;
		}
	}

/* Items (Story: items style1 — card grid) */

	.items {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: var(--space-3);
		margin: 0 0 var(--space-4) 0;
		padding: 0;
		list-style: none;
		text-align: left;
	}

	.items > * {
		margin: 0;
		padding: var(--space-3);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-top: 4px solid var(--color-seaglass);
		border-radius: var(--radius);
	}

	.wrapper.alt .items > * {
		border-color: #D6CCBC;
		border-top-color: var(--color-accent);
	}

	.items h3 {
		font-size: 1.2rem;
		margin: 0 0 0.5rem 0;
	}

	.items h3 a {
		text-decoration: none;
	}

	.items h3 a:hover {
		text-decoration: underline;
	}

	.items p {
		font-size: 1.02rem;
		margin: 0;
	}

	.items p + p {
		margin-top: 0.6rem;
	}

/* Homepage specifics */

	.hero .content h1 {
		margin-bottom: var(--space-3);
	}

	.hero .facts {
		color: var(--color-text-muted);
		font-size: 1rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.hero .facts li {
		margin: 0 0 0.25rem 0;
		padding: 0;
	}

	.intro-grid {
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		gap: var(--space-4);
		align-items: start;
	}

	.intro-grid .portrait {
		margin: 0;
	}

	.credentials {
		list-style: none;
		margin: 0 0 var(--space-3) 0;
		padding: 0;
	}

	.credentials li {
		border-bottom: 1px solid var(--color-border);
		margin: 0;
		padding: 0.5rem 0;
	}

	.credentials li:first-child {
		border-top: 1px solid var(--color-border);
	}

	@media screen and (max-width: 40em) {
		.intro-grid {
			grid-template-columns: 1fr;
			gap: var(--space-3);
		}
	}

	.focus-list {
		columns: 15rem 3;
		column-gap: var(--space-4);
		list-style: none;
		margin: 0 0 var(--space-3) 0;
		padding: 0;
		text-align: left;
	}

	.focus-list li {
		break-inside: avoid;
		border-bottom: 1px solid var(--color-border);
		margin: 0;
		padding: 0.45rem 0;
	}

	.contact-card {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-large);
		padding: var(--space-3);
		box-shadow: var(--shadow);
	}

	.contact-card address {
		font-style: normal;
	}

	.contact-list {
		list-style: none;
		margin: 0 0 var(--space-3) 0;
		padding: 0;
	}

	.contact-list li {
		margin: 0 0 0.5rem 0;
		padding: 0;
	}

	.contact-list .label {
		display: block;
		color: var(--color-text-muted);
		font-size: 0.9rem;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
	}

	.contact-list a {
		display: inline-block;
		min-height: 2.75rem;
		padding: 0.35rem 0;
		font-size: 1.15rem;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

/* Inner pages */

	.page-header {
		background: var(--color-sand);
		border-bottom: 1px solid #D6CCBC;
		padding-top: var(--space-5);
		padding-bottom: var(--space-4);
	}

	.page-header h1 {
		margin-bottom: 0.5rem;
	}

	.page-header .tagline {
		color: var(--color-text-muted);
		font-size: 1.1rem;
		margin: 0;
		max-width: var(--measure);
	}

	.breadcrumb {
		font-size: 0.95rem;
		margin: 0 0 var(--space-2) 0;
	}

	.breadcrumb ol {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.breadcrumb li {
		margin: 0;
		padding: 0;
	}

	.breadcrumb li + li::before {
		content: '/';
		color: var(--color-text-muted);
		padding: 0 0.5rem;
	}

	.breadcrumb ol {
		align-items: baseline;
	}

	.breadcrumb a,
	.breadcrumb span {
		display: inline-block;
		padding: 0.6rem 0;
	}

	.page-body {
		padding-top: var(--space-5);
	}

	.prose {
		max-width: var(--measure);
	}

	.prose::after {
		content: '';
		display: table;
		clear: both;
	}

	.prose ul ul {
		margin-top: 0.35rem;
		margin-bottom: 0.35rem;
	}

	.prose li > p {
		margin-bottom: 0.4rem;
	}

	.content-layout {
		display: grid;
		grid-template-columns: minmax(0, var(--measure)) minmax(14rem, 18rem);
		gap: var(--space-5);
		justify-content: space-between;
		align-items: start;
	}

	.content-layout > aside {
		position: sticky;
		top: calc(var(--header-height) + 1.5rem);
	}

	@media screen and (max-width: 62em) {
		.content-layout {
			grid-template-columns: minmax(0, 1fr);
			gap: var(--space-4);
		}

		.content-layout > aside {
			position: static;
			max-width: var(--measure);
		}
	}

	.side-card {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-large);
		padding: var(--space-3);
		margin-bottom: var(--space-3);
		font-size: 1rem;
	}

	.side-card h2 {
		font-size: 1.15rem;
		margin: 0 0 0.75rem 0;
	}

	.side-card p {
		margin-bottom: 0.9rem;
	}

	.side-card ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.side-card li {
		margin: 0;
		padding: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.side-card li:last-child {
		border-bottom: 0;
	}

	.side-card li a {
		display: flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.3rem 0;
		text-decoration: none;
	}

	.side-card li a:hover {
		text-decoration: underline;
	}

	.side-card li a[aria-current="page"] {
		color: var(--color-text);
		font-weight: 600;
	}

	.side-card .button {
		width: 100%;
	}

	/* Inset photos carried over from the original pages */

	.inset {
		margin: 0.4rem 0 var(--space-3) 0;
		max-width: 100%;
	}

	.inset img {
		display: block;
		border-radius: var(--radius);
	}

	.inset figcaption {
		color: var(--color-text-muted);
		font-size: 0.95rem;
		font-style: italic;
		margin-top: 0.5rem;
	}

	@media screen and (min-width: 36em) {
		.inset.right {
			float: right;
			margin-left: var(--space-3);
			max-width: 45%;
		}

		.inset.left {
			float: left;
			margin-right: var(--space-3);
			max-width: 45%;
		}
	}

	.callout {
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-left: 4px solid var(--color-accent);
		border-radius: var(--radius);
		margin: 0 0 var(--space-3) 0;
		padding: var(--space-2) var(--space-3);
	}

	.callout > :last-child {
		margin-bottom: 0;
	}

	/* Book list (resources) */

	.book-list {
		list-style: none;
		margin: 0 0 var(--space-4) 0;
		padding: 0;
	}

	.book-list li {
		display: grid;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		gap: var(--space-3);
		align-items: start;
		border-bottom: 1px solid var(--color-border);
		margin: 0;
		padding: var(--space-3) 0;
	}

	.book-list img {
		display: block;
		width: 6.5rem;
		height: auto;
		box-shadow: var(--shadow);
	}

	.book-list .title {
		display: block;
		font-weight: 600;
	}

	.book-list .author {
		display: block;
		color: var(--color-text-muted);
	}

	/* Hotline list */

	.hotlines {
		list-style: none;
		margin: 0 0 var(--space-4) 0;
		padding: 0;
	}

	.hotlines li {
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		background: var(--color-surface);
		margin: 0 0 var(--space-2) 0;
		padding: var(--space-2) var(--space-3);
	}

	.hotlines .name {
		display: block;
		font-weight: 600;
	}

	.hotlines a {
		display: inline-block;
		padding: 0.5rem 0;
		min-height: 2.75rem;
		font-size: 1.2rem;
		font-weight: 600;
	}

	/* Map embed */

	.map-embed {
		position: relative;
		aspect-ratio: 4 / 3;
		width: 100%;
		max-width: 40rem;
		margin: 0 0 var(--space-2) 0;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		overflow: hidden;
		background: var(--color-sand);
	}

	.map-embed iframe {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	.directions h3 {
		font-family: var(--font-body);
		font-size: 1.1rem;
		font-weight: 600;
	}

/* Footer */

	.site-footer {
		background: var(--color-accent);
		color: #fff;
		font-size: 1rem;
		padding: var(--space-5) var(--gutter) var(--space-4) var(--gutter);
	}

	.site-footer a {
		color: #fff;
	}

	.site-footer a:hover {
		color: #fff;
		text-decoration-thickness: 2px;
	}

	.site-footer :focus-visible {
		outline-color: #fff;
	}

	.site-footer .inner {
		max-width: var(--inner-width);
		margin: 0 auto;
	}

	.footer-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
		gap: var(--space-4);
		margin-bottom: var(--space-4);
	}

	.site-footer h2 {
		color: #fff;
		font-size: 1.15rem;
		margin: 0 0 0.75rem 0;
	}

	.site-footer address {
		font-style: normal;
	}

	.site-footer ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.site-footer li {
		margin: 0;
		padding: 0;
	}

	.site-footer li a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
		padding: 0.1rem 0;
	}

	.site-footer .footer-meta {
		border-top: 1px solid rgba(255, 255, 255, 0.3);
		padding-top: var(--space-3);
		font-size: 0.95rem;
	}

	.site-footer .footer-meta p {
		margin-bottom: 0.5rem;
	}

/* Print */

	@media print {
		.site-header, .site-footer, .skip-link, .content-layout > aside, .spotlight .image {
			display: none !important;
		}

		body {
			background: #fff;
			font-size: 12pt;
		}

		.wrapper, .page-header {
			padding: 1rem 0;
			background: none;
		}
	}