/* The Bride Stripped Bare: shared stylesheet. Keeps the original Courier / textured-background look. */

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

body {
	margin: 0;
	background: #fff url(../jpegs/Carra_liter.jpg);
	color: #000;
	font: 14px/1.5 "Courier New", Courier, monospace;
}

a:link { color: #0000ee; }
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }
:focus-visible { outline: 2px solid #000; outline-offset: 3px; }

.page {
	max-width: 860px;
	margin: 0 auto;
	padding: 1.2rem 1.2rem 4rem;
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	column-gap: 1.6rem;
}

/* ---- title block ---- */
header.title { grid-column: 2; text-align: right; margin-bottom: 3rem; }
header.title p { margin: 0; }
.name { font-size: 16px; }
.years { font-size: 12px; }

/* ---- menu ---- */
nav.menu { grid-column: 1; grid-row: 2; }
nav.menu ul { margin: 0; padding: 0 0 0 1.4rem; list-style: disc; }
nav.menu li { margin: 0 0 2.6rem; }
nav.menu a { font-size: 16px; font-weight: bold; }
nav.menu a[aria-current="page"] { color: #000; text-decoration: none; }

/* ---- content ---- */
main { grid-column: 2; grid-row: 2; min-width: 0; max-width: 40rem; }
.text p { margin: 0 0 1.4em; text-align: justify; }
.text p:first-child { margin-top: .4em; }

.track { margin-bottom: 2rem; }
.track .head { margin: 0 0 .5em; text-align: left; }
.track p { margin: 0 0 .7em; text-align: justify; }
.track audio { display: block; width: 100%; max-width: 420px; height: 34px; }

body.pictures .page { max-width: 960px; }
body.pictures main { max-width: none; }
.gallery { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.gallery a { display: block; line-height: 0; }
.gallery img { display: block; border: 0; }
.gallery a:hover img { outline: 2px solid #000; }
.credit { margin: 2rem 0 0; text-align: center; font-size: 11px; }

/* ---- photo viewer ---- */
.tb-overlay { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; padding: 2rem 1rem; background: rgba(0,0,0,.93); z-index: 999; }
.tb-overlay.open { display: flex; }
.tb-overlay img { display: block; max-width: 100%; max-height: 82vh; border: 2px solid #fff; }
.tb-overlay .tb-cap { max-width: 70ch; color: #fff; font: 14px/1.4 "Courier New", Courier, monospace; text-align: center; min-height: 1.4em; }
.tb-overlay button { position: absolute; background: #000; color: #fff; border: 1px solid #888; font: inherit; font-size: 1.5rem; line-height: 1; padding: .4rem .8rem; cursor: pointer; }
.tb-overlay .tb-close { top: 1rem; right: 1.2rem; }
.tb-overlay .tb-nav { top: 50%; transform: translateY(-50%); }
.tb-overlay .tb-prev { left: 1rem; }
.tb-overlay .tb-next { right: 1rem; }

/* ---- narrow screens ---- */
@media (max-width: 720px) {
	.page { display: block; padding: 1rem 1rem 3rem; }
	header.title { margin-bottom: 1.4rem; }
	nav.menu { margin-bottom: 1.6rem; }
	nav.menu ul { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; padding: 0; }
	nav.menu li { margin: 0; }
	main { max-width: none; }
	.text p { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}