/*
 * Front page: the vineyard hero and its awards, the films, the season timeline (with the
 * 125 / 1 line as its caption), five chapters with scroll-snap strips, browse by type.
 *
 * Sections run full width; --edge pads their content to the 1360px column, so the strips
 * can bleed to the screen edge while their first card lines up with the text above.
 */

/* Hero --------------------------------------------------------------------- */

/* Full width: the photo, its awards band and the films block below run together as one dark
   opening; the paper starts at the season. */
.hero {
	padding: 0;
}

.hero__plate {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 360px;
	/* Header and awards band below it stay on the first screen too. */
	max-height: calc(100svh - 270px);
	background: var(--screen);
}

.hero__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Grain over the picture, then a scrim under the words. */
.hero__plate::before,
.hero__plate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.hero__plate::before {
	background-image: var(--grain);
	background-size: 180px;
	opacity: 0.16;
	mix-blend-mode: overlay;
}

.hero__plate::after {
	background: linear-gradient(to top, rgb(28 23 25 / 0.78), rgb(28 23 25 / 0) 62%);
}

.hero__text {
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	/* Text lines up with the logo and the content column below. */
	padding: clamp(20px, 4.5vw, 64px) var(--edge);
	color: var(--paper);
}

.hero__title {
	max-width: 6.2em;
	margin: 0;
	font-size: clamp(2.75rem, 1rem + 6.2vw, 7.25rem);
	font-weight: 300;
	line-height: 0.9;
	letter-spacing: -0.015em;
	color: var(--paper);
	text-wrap: balance;
}

.hero__lede {
	max-width: 33rem;
	margin: clamp(14px, 2vw, 24px) 0 0;
	line-height: 1.5;
	color: rgb(246 245 243 / 0.86);
}

/* Awards: William's four logos (white on transparent PNG), in a dark band under the photo.
   The band has no grain, so its lower edge shows where the films block (with grain) begins. */
.hero__awards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 20px clamp(32px, 5vw, 80px);
	margin: 0;
	padding: clamp(24px, 2.6vw, 36px) var(--edge);
	list-style: none;
	background: var(--screen);
	--mark-h: clamp(48px, 2.5rem + 3.2vw, 96px);
}

.hero__awards li {
	margin: 0;
}

.hero__awards img {
	display: block;
	width: auto;
	height: var(--mark-h);
}

/* Films -------------------------------------------------------------------- */

.films {
	position: relative;
	isolation: isolate;
	padding: clamp(72px, 9vw, 136px) var(--edge) clamp(64px, 8vw, 112px);
	background: var(--screen);
	color: var(--screen-ink);
}

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

.films__head,
.season__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 16px 24px;
	align-items: end;
}

.films__title,
.season__title {
	grid-column: 1 / span 6;
	margin: 0;
	font-size: var(--t-4xl);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.01em;
}

.films__title {
	color: var(--screen-ink);
}

.films__intro,
.season__words {
	grid-column: 7 / -1;
	max-width: 34rem;
	margin: 0;
}

.films__intro {
	color: var(--screen-soft);
}

.films__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px clamp(20px, 3vw, 48px);
	margin: clamp(40px, 5vw, 72px) 0 0;
	padding: 0;
	list-style: none;
}

.film__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

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

.film__link:focus-visible {
	outline-color: var(--screen-soft);
	outline-offset: 8px;
}

.film__still {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

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

.film__part {
	margin-top: 20px;
	font-family: var(--serif);
	font-size: var(--t-2xl);
	font-weight: 400;
	line-height: 1.05;
}

.film__link:hover .film__part {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--screen-soft);
	text-underline-offset: 0.15em;
}

.film__when {
	margin-top: 6px;
	font-size: var(--t-s);
	color: var(--screen-soft);
}

.film__text {
	max-width: 32ch;
	margin-top: 12px;
	line-height: 1.5;
}

/* Season and timeline ------------------------------------------------------ */

.season {
	padding-top: clamp(88px, 11vw, 168px);
}

.season__head,
.timeline,
.chapter__head,
.chapter__all {
	padding-inline: var(--edge);
}

.season__odds {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--t-2xl);
	font-style: italic;
	line-height: 1.15;
	text-wrap: balance;
}

.season__intro {
	margin: 12px 0 0;
	color: var(--ink-soft);
}

.timeline {
	margin-top: clamp(40px, 5vw, 72px);
}

.timeline ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.timeline__months,
.timeline__line,
.timeline__phases {
	position: relative;
}

.timeline__months {
	height: 1.6em;
	font-size: var(--t-xs);
	letter-spacing: 0.02em;
	color: var(--ink-soft);
}

.timeline__months li {
	position: absolute;
	left: var(--at);
}

.timeline__line {
	height: 18px;
	border-bottom: 1px solid var(--ink-soft);
}

.timeline__line span {
	position: absolute;
	bottom: 0;
	left: var(--at);
	width: 1px;
	height: 11px;
	background: var(--mauve);
}

.timeline__phases {
	height: 3.25rem;
}

.timeline__phases li {
	position: absolute;
	top: 0;
	left: var(--start);
	width: calc(var(--end) - var(--start));
	padding: 12px 0 0 10px;
	border-left: 1px solid var(--ink-soft);
}

.timeline__phases a {
	font-family: var(--serif);
	font-size: var(--t-l);
	font-weight: 500;
	line-height: 1.1;
	color: var(--ink);
	text-decoration: none;
}

.timeline__phases a:hover {
	color: var(--mauve);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}

/* Chapters ----------------------------------------------------------------- */

.chapter {
	padding-top: clamp(72px, 9vw, 136px);
	scroll-margin-top: 24px;
	--row-h: clamp(220px, 110px + 13vw, 310px);
}

.chapter__head {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 20px 24px;
	align-items: end;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.chapter__name {
	grid-column: 1 / span 5;
}

.chapter__num {
	display: block;
	margin-bottom: 12px;
	font-family: var(--serif);
	font-size: var(--t-xl);
	line-height: 1;
	color: var(--mauve);
}

.chapter__title {
	margin: 0;
	font-size: var(--t-3xl);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}

.chapter__when {
	margin: 12px 0 0;
	font-size: var(--t-s);
	color: var(--ink-soft);
}

.chapter__words {
	grid-column: 6 / span 5;
}

.chapter__line {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--t-2xl);
	font-style: italic;
	line-height: 1.15;
	text-wrap: balance;
}

.chapter__text {
	max-width: 34rem;
	margin: 10px 0 0;
	color: var(--ink-soft);
}

.chapter__arrows {
	grid-column: 11 / -1;
	justify-self: end;
	display: flex;
	gap: 4px;
	margin-right: -10px;
}

.chapter__arrows[hidden] {
	display: none;
}

.chapter .chapter__arrow,
.chapter .chapter__arrow:hover,
.chapter .chapter__arrow:focus {
	display: grid;
	place-items: center;
	width: 52px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--ink);
	cursor: pointer;
}

.chapter .chapter__arrow:hover {
	color: var(--mauve);
}

.chapter .chapter__arrow[aria-disabled="true"] {
	color: var(--rule);
	cursor: default;
}

.chapter__arrow--prev svg {
	transform: scaleX(-1);
}

.strip {
	display: flex;
	gap: clamp(14px, 1.6vw, 24px);
	margin: 0;
	padding: 4px var(--edge) 20px;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--edge);
	scrollbar-width: thin;
	scrollbar-color: var(--rule) transparent;
}

.strip:focus-visible {
	outline-offset: -2px;
}

/* Mouse drag (home.js): snap waits until the strip has settled on a card. */
.strip {
	position: relative;
}

@media (hover: hover) and (pointer: fine) {
	.strip {
		cursor: grab;
	}
}

.strip.is-dragging {
	scroll-snap-type: none;
	user-select: none;
}

/* With home.js running, the hairline below stands in for the browser scrollbar. */
.strip.is-enhanced {
	padding-bottom: 0;
	scrollbar-width: none;
}

.strip.is-enhanced::-webkit-scrollbar {
	display: none;
}

.chapter__progress {
	margin-top: 24px;
	padding-inline: var(--edge);
}

.chapter__progress[hidden] {
	display: none;
}

.chapter__track {
	position: relative;
	display: block;
	height: 1px;
	background: var(--rule);
}

.chapter__thumb {
	position: absolute;
	top: -1px;
	left: 0;
	height: 3px;
	background: var(--mauve);
}

.strip.is-dragging,
.strip.is-dragging * {
	cursor: grabbing;
}

.chapter__all {
	margin: 14px 0 0;
	font-size: var(--t-s);
}

/* Browse by type ----------------------------------------------------------- */

.browse {
	padding: clamp(104px, 12vw, 184px) var(--edge) clamp(80px, 9vw, 136px);
}

.browse__title {
	margin: 0 0 clamp(28px, 3vw, 44px);
	font-size: var(--t-3xl);
	font-weight: 300;
	line-height: 1;
}

.browse__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ink-soft);
}

.browse__list li + li {
	border-left: 1px solid var(--rule);
}

.browse__list a {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 22px 16px 28px;
	color: inherit;
	text-decoration: none;
}

.browse__list li:first-child a {
	padding-left: 0;
}

.browse__name {
	font-family: var(--serif);
	font-size: clamp(1.5rem, 0.6rem + 1.6vw, 2.5rem);
	font-weight: 400;
	line-height: 1.05;
	color: var(--ink);
	overflow-wrap: normal;
}

.browse__count {
	font-size: var(--t-s);
	color: var(--ink-soft);
}

.browse__list a:hover .browse__name {
	color: var(--mauve);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* Smaller screens ---------------------------------------------------------- */

@media (max-width: 960px) {
	.films__title,
	.season__title,
	.films__intro,
	.season__words,
	.chapter__name,
	.chapter__words {
		grid-column: 1 / -1;
	}

	.chapter__arrows {
		grid-column: 1 / -1;
	}

	.films__list {
		grid-template-columns: minmax(0, 1fr);
		max-width: 560px;
	}

	.browse__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.browse__list li + li {
		border-left: 0;
	}

	.browse__list li {
		border-bottom: 1px solid var(--rule);
	}

	.browse__list li:nth-child(even) {
		border-left: 1px solid var(--rule);
	}

	.browse__list li:nth-child(odd) a {
		padding-left: 0;
	}
}

@media (max-width: 720px) {
	.hero__plate {
		aspect-ratio: 4 / 5;
		min-height: 0;
		max-height: 74svh;
	}

	/* Phones: smaller marks, two to a row (the flex row wraps on its own). */
	.hero__awards {
		gap: 18px 36px;
		--mark-h: 50px;
	}

	/* Too narrow for names under the axis: one row per phase, its span drawn as a bar
	   aligned to the months above. */
	.timeline__phases {
		height: auto;
		margin-top: 6px;
	}

	.timeline__phases li {
		position: static;
		width: auto;
		padding: 0;
		border: 0;
	}

	.timeline__phases a {
		display: block;
		padding: 12px 0 10px;
		background:
			linear-gradient(to right, transparent var(--start), var(--mauve) var(--start), var(--mauve) var(--end), transparent var(--end)) left bottom / 100% 3px no-repeat,
			linear-gradient(var(--rule), var(--rule)) left bottom 1px / 100% 1px no-repeat;
	}

	.browse__list {
		grid-template-columns: minmax(0, 1fr);
	}

	.browse__list li:nth-child(even) {
		border-left: 0;
	}

	.browse__list li a,
	.browse__list li:nth-child(odd) a {
		padding: 18px 0 20px;
	}
}

/* Touch screens swipe the strips; the arrows are for mice. */
@media (hover: none) and (pointer: coarse) {
	.chapter__arrows {
		display: none;
	}
}