/*
 * Vintage 2014: fonts, colour tokens and the site-wide frame (header, navigation, footer).
 * Paper-white monograph base; mauve #69585e is the only accent.
 */

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

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

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

:root {
	--paper: #f6f5f3;
	--ink: #2b2427;
	--ink-soft: #686061;
	--mauve: #69585e;
	--rule: #ddd7d7;
	--screen: #1c1719;
	--screen-ink: #ece7e8;
	--screen-soft: #b9a9ae;

	--serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
	--sans: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	/* Type scale, 18px body. */
	--t-xs: 0.8125rem;
	--t-s: 0.9375rem;
	--t-m: 1.125rem;
	--t-l: 1.3125rem;
	--t-xl: 1.5rem;
	--t-2xl: clamp(1.875rem, 1.5rem + 1.2vw, 2.25rem);
	--t-3xl: clamp(2.25rem, 1.4rem + 3vw, 3.75rem);
	--t-4xl: clamp(2.75rem, 1.2rem + 5.4vw, 6rem);

	--wrap: 1360px;
	--gutter: clamp(16px, 4vw, 56px);

	/* Film grain for the cinematic moments: static SVG noise, no image file. */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

body {
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: var(--t-m);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
	font-family: var(--sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.1;
	color: var(--ink);
	font-variant-numeric: lining-nums;
}

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

a:hover,
a:focus {
	color: var(--ink);
}

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

::selection {
	background: var(--mauve);
	color: var(--paper);
}

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

/* Shared layout ------------------------------------------------------------
 * Theme templates run full width; --edge pads content to the 1360px column. */

.v14 {
	flex: 1 1 100%;
	min-width: 0;
	--edge: max(var(--gutter), calc((100% - var(--wrap)) / 2));
	/* Cormorant defaults to old-style figures, which make "Part 1" read as "Part I". */
	font-variant-numeric: lining-nums;
}

.v14 p {
	text-wrap: pretty;
}

/* Story cards (front page strips and archive grids). Each picture keeps its own shape;
   --ratio is width / height, --row-h the picture height. */

.card {
	flex: 0 0 auto;
	width: calc(var(--ratio) * var(--row-h));
	min-width: 9.5rem;
	scroll-snap-align: start;
}

.card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.card__link:hover,
.card__link:focus {
	color: inherit;
}

.card__media {
	display: block;
	height: var(--row-h);
	overflow: hidden;
	background: var(--screen);
}

.card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Audio interviews have no picture: their card is set in type, on the accent. */
.card__media--audio {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 18px 20px 22px;
	background: var(--mauve);
	color: var(--paper);
}

.card__minutes {
	font-size: var(--t-xs);
	letter-spacing: 0.02em;
	color: var(--paper);
}

.card__voice {
	font-family: var(--serif);
	font-size: clamp(1.625rem, 1rem + 1.3vw, 2.25rem);
	font-weight: 400;
	line-height: 1.02;
	text-wrap: balance;
}

.card__label {
	display: block;
	margin-top: 14px;
	font-size: var(--t-xs);
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

.card__title {
	display: block;
	margin-top: 3px;
	font-family: var(--serif);
	font-size: var(--t-l);
	font-weight: 500;
	line-height: 1.15;
	color: var(--ink);
}

.card__link:hover .card__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--mauve);
	text-underline-offset: 0.18em;
}

/* Header ------------------------------------------------------------------ */

.site-header {
	background: var(--paper);
}

.site-header .inside-header {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	padding: 22px var(--gutter);
}

.site-logo .header-image {
	display: block;
	width: 168px;
	height: auto;
}

.main-navigation,
.main-navigation ul ul {
	background: transparent;
}

.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle {
	padding-inline: 14px;
	line-height: 44px;
	font-size: var(--t-s);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--ink-soft);
}

.main-navigation .main-nav ul li:last-child a {
	padding-right: 0;
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li:not([class*="current-menu-"]):focus > a {
	color: var(--mauve);
}

.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--mauve);
	text-underline-offset: 0.35em;
}

.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .menu-toggle:focus {
	background: transparent;
	color: var(--ink);
}

@media (max-width: 768px) {
	.main-navigation .main-nav ul li a {
		padding-inline: var(--gutter);
	}

	.main-navigation.toggled .main-nav > ul {
		border-top: 1px solid var(--rule);
	}
}

/* Footer: dark, like closing credits. It bookends the hero plate and the films block. ------ */

.site-footer {
	position: relative;
	isolation: isolate;
	background: var(--screen);
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--grain);
	background-size: 180px;
	opacity: 0.07;
	pointer-events: none;
}

.site-footer .footer-widgets,
.site-footer .site-info {
	background: transparent;
	color: var(--screen-soft);
}

.site-footer .footer-widgets-container,
.site-footer .inside-site-info {
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	padding-inline: var(--gutter);
}

.site-footer .footer-widgets-container {
	padding-block: clamp(56px, 7vw, 96px) clamp(40px, 5vw, 64px);
}

.site-footer .footer-widgets {
	font-size: var(--t-s);
}

/* All footer widgets sit in GP's first footer area; lay them out side by side.
   GP pulls that area 40px left for its column gutters, which a single area doesn't need. */
.site-footer .footer-widgets-container .inside-footer-widgets {
	margin-left: 0;
}

/* The about text at the left edge, the menus at the right edge (text still reads left). */
.site-footer .footer-widget-1 {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 32px 48px;
}

.site-footer .footer-widget-1 .widget:not(:first-child) {
	justify-self: end;
}

.site-footer .footer-widget-1 .widget {
	margin: 0;
	padding: 0;
	background: transparent;
}

.site-footer .textwidget {
	max-width: 30rem;
}

.site-footer .menu img {
	width: 18px;
	height: auto;
	margin-right: 10px;
	vertical-align: -3px;
}

@media (max-width: 720px) {
	.site-footer .footer-widget-1 {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer .footer-widget-1 .widget:not(:first-child) {
		justify-self: start;
	}
}

.site-footer .widget-title {
	margin-bottom: 0.75rem;
	font-family: var(--serif);
	font-size: var(--t-xl);
	font-weight: 500;
	text-transform: none;
	color: var(--screen-ink);
}

.site-footer .widget ul li {
	margin-bottom: 0.35em;
}

.site-footer a {
	color: var(--screen-soft);
	text-decoration-color: rgb(185 169 174 / 0.45);
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--screen-ink);
	text-decoration-color: currentColor;
}

.site-footer :focus-visible {
	outline-color: var(--screen-soft);
}

.site-footer .site-info {
	border-top: 1px solid rgb(236 231 232 / 0.12);
	font-size: var(--t-xs);
}

/* The copyright line closes the page centred, like a colophon. */
.site-footer .inside-site-info {
	justify-content: center;
	text-align: center;
}

.site-footer:not(.footer-bar-active) .copyright-bar {
	margin: 0 auto;
}