/*
 * Water of the output-canal child theme: CSS water and waterlines, the home page hero,
 * the history buoys and value rafts, the drifting row of the winner year pages, and the
 * one-off motions (spec 8.1.6, 8.2, 8.3, 8.4).
 *
 * Mode classes on <html>, set in <head> before the first paint (inc/motion.php):
 *   oc-js     scripts run;
 *   oc-flow   the waves move; oc-still: everything stands still (the visitor stopped the
 *             waves, or the system asks for reduced motion and the visitor has not started them);
 *   oc-list   the winner year page shows the list instead of the canal.
 * Nothing in this file moves without oc-flow, and no motion changes the layout.
 */

/* ---------- CSS water and waterlines (8.1.6) ---------- */

.oc-sea {
	position: relative;
	isolation: isolate;
}

.oc-sea::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--oc-sea);
}

.oc-waterline {
	height: 12px;
	background: var(--oc-waterline) 0 100% / 40px 12px repeat-x;
}

/* The waterlines of rafts and cards on the water lap slowly while the waves flow, right to left
   like all the water of the site (spec 8.2, flow direction). The strips are 12 px high, so the
   repaint is small. */
@keyframes oc-lap {
	to {
		background-position-x: -40px;
	}
}

.oc-flow .oc-sea .oc-raft::after,
.oc-flow .oc-sea .oc-card::after,
.oc-flow .oc-hero .oc-raft::after,
.oc-flow:not(.oc-list) .oc-drift .oc-card::after {
	animation: oc-lap 7s linear infinite;
}

/* ---------- The water canvas (A, 2026-10-20: home first view, drift zone, inner-page band) ----------
   One canvas per water area, drawn by water.js. Under it the static fallback, always in the
   layout: CSS water down to the bank and a static waterline with paper below. The canvas
   draws the same edge live, so the layout is identical with or without WebGL (spec 8.3). */

:root {
	--oc-bank: 44px; /* paper under the waterline at the bottom of every water area (water.js BANK) */
	--oc-edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='18' viewBox='0 0 120 18'%3E%3Cpath d='M0 9c15-6 45-6 60 0s45 6 60 0V18H0z' fill='%23FFFEFA'/%3E%3Cpath d='M0 9c15-6 45-6 60 0s45 6 60 0' fill='none' stroke='%231F1F1F' stroke-width='1.5'/%3E%3C/svg%3E");
}

.oc-water {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--oc-dur-fade) linear;
}

.oc-water.is-on {
	opacity: 1;
}

.oc-still .oc-water {
	transition: none;
}

/* The static fallback of a water area (under the canvas) */
.oc-hero__sea,
.oc-tide,
.oc-drift {
	position: relative;
	isolation: isolate;
}

.oc-hero__sea::before,
.oc-tide::before,
.oc-drift::before {
	content: "";
	position: absolute;
	inset: 0 0 var(--oc-bank);
	z-index: -1;
	background: var(--oc-sea);
}

.oc-hero__sea::after,
.oc-tide::after,
.oc-drift::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--oc-bank) - 9px);
	z-index: -1;
	height: 18px;
	background: var(--oc-edge) 0 0 / 120px 18px repeat-x;
	pointer-events: none;
}

/* ---------- Home page first view (8.3, block 1; A) ---------- */

.oc-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: calc(100svh - var(--oc-head-h));
}

/* The sky: kicker and tagline in one row, the one-line H1 standing on the horizon */
.oc-hero__sky {
	position: relative;
	z-index: 1;
	container-type: inline-size;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "kicker tagline" "title title";
	column-gap: 32px;
	align-items: baseline;
	width: 100%;
	padding-top: clamp(20px, 4.5vh, 52px);
}

.oc-hero__sky .oc-kicker {
	grid-area: kicker;
}

/* A box of fixed width at the right end, text from its left edge: the start of the line does
   not move when the web font replaces the fallback face (no layout shift) */
.oc-hero__sky .oc-tagline {
	grid-area: tagline;
	justify-self: end;
	width: min(20.5em, 48cqi);
}

/* One line that fills the content column; the horizon is 0.2em under the line box, below
   the descenders of "design" and "output" (no text on the water) */
.oc-hero__sky .oc-h1--hero {
	grid-area: title;
	margin: clamp(6px, 1.4vh, 16px) 0 .2em;
	font-size: min(calc(100cqi / 7.3), 164px);
	line-height: 1;
	letter-spacing: -.035em;
}

.oc-hero__sea {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 52svh;
	padding-bottom: calc(var(--oc-bank) + clamp(28px, 5vh, 56px));
}

.oc-hero__float {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: clamp(24px, 3vw, 44px);
	width: 100%;
}

.oc-raft--hero {
	width: min(460px, 100%);
	padding: 22px 26px 30px;
}

.oc-raft--hero .oc-lede {
	margin-bottom: 10px;
	font-size: clamp(24px, 2.3vw, 32px);
}

.oc-raft--hero .oc-raft__text {
	font-size: 16px;
	line-height: 1.55;
}

.oc-raft--hero .oc-raft__text > * + * {
	margin-top: 8px;
}

.oc-raft--hero .oc-raft__link {
	margin-top: 14px;
}

.oc-hero .oc-buoy {
	flex: none;
	margin-bottom: 8px;
	transform-origin: 50% 100%;
}

@media (max-width: 760px) {
	.oc-hero__sky {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "kicker" "tagline" "title";
	}

	.oc-hero__sky .oc-tagline {
		justify-self: start;
		width: auto;
		margin-top: 8px;
		font-size: 20px;
	}

	/* Three lines, one word each, about 100 px at 390 */
	.oc-hero__sky .oc-h1--hero {
		margin-bottom: .16em;
		font-size: calc(100cqi / 3.6);
		line-height: .92;
		letter-spacing: -.04em;
	}

	/* The first screen shows the H1, the water and the buoy; the raft floats one screen down */
	.oc-hero__sea {
		justify-content: flex-start;
		padding-top: 46svh;
		padding-bottom: calc(var(--oc-bank) + 40px);
	}

	.oc-hero__float {
		display: block;
	}

	.oc-raft--hero {
		width: 100%;
		padding: 20px 20px 30px;
	}

	.oc-hero .oc-buoy {
		position: absolute;
		right: 12px;
		bottom: calc(100% + 56px);
		margin: 0;
	}
}

/* ---------- Inner pages: the band of water under the heading (8.3, A) ---------- */

.oc-tide {
	height: calc(clamp(150px, 17vw, 250px) + var(--oc-bank));
}

/* The heading stands on the water: no waterline of its own, the H1 0.2em above the horizon */
.oc-pagehead--tide {
	padding-bottom: 0;
}

.oc-pagehead--tide::after {
	display: none;
}

.oc-pagehead--tide h1 {
	margin-bottom: .2em;
	font-size: clamp(52px, 9vw, 136px);
}

.oc-pagehead--tide .oc-intro {
	margin-bottom: 28px;
}

/* Winner year page, canal view: the drift water starts right under the heading */
html:not(.oc-list) .oc-yearpage .oc-pagehead::after {
	display: none;
}

/* ---------- History: pontoon and statistic buoys (8.3, block 2) ---------- */

.oc-history {
	padding: clamp(56px, 9vh, 110px) 0 clamp(56px, 8vh, 96px);
}

.oc-history .oc-raft {
	max-width: 600px;
}

.oc-history .oc-raft h2 {
	margin: 10px 0 14px;
}

.oc-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin: 0;
	padding: 48px var(--oc-gut) 8px;
	list-style: none;
}

.oc-stat {
	display: grid;
	place-content: center;
	flex: none;
	width: clamp(150px, 14vw, 200px);
	aspect-ratio: 1;
	padding: 0 22px;
	border: var(--oc-frame);
	border-radius: 50%;
	background: var(--oc-paper);
	box-shadow: inset 0 0 0 9px var(--oc-paper), inset 0 0 0 10px var(--oc-pencil);
	text-align: center;
}

.oc-stat--tide {
	background: var(--oc-stone);
	box-shadow: inset 0 0 0 9px var(--oc-stone), inset 0 0 0 10.5px var(--oc-ink);
}

.oc-stat small {
	display: block;
	margin-bottom: 2px;
	font: italic 400 15px / 1 var(--oc-serif);
	color: var(--oc-ink-2);
}

.oc-stat b {
	display: block;
	font: 400 var(--oc-fs-stat) / 1 var(--oc-serif);
	font-variation-settings: "opsz" 144;
	letter-spacing: -.02em;
}

.oc-stat--word b {
	font-size: clamp(25px, 2.3vw, 33px);
}

.oc-stat span {
	display: block;
	max-width: 120px;
	margin: 8px auto 0;
	font: 500 var(--oc-fs-tag) / 1.3 var(--oc-sans);
	color: var(--oc-ink-2);
}

@media (max-width: 760px) {
	.oc-stats {
		display: grid;
		grid-template-columns: repeat(2, 150px);
		justify-content: center;
		gap: 20px;
	}

	.oc-stat {
		width: 150px;
		padding: 0 14px;
	}

	.oc-stat b {
		font-size: 42px;
	}

	.oc-stat--word b {
		font-size: 24px;
	}
}

/* ---------- Values: three rafts that surface once (8.3, block 3) ---------- */

.oc-values {
	padding: clamp(72px, 12vh, 140px) 0 clamp(100px, 15vh, 170px);
}

.oc-values__head {
	display: inline-block;
	max-width: 620px;
	padding: 22px 28px 36px;
}

.oc-values__head h2 {
	margin-top: 10px;
}

.oc-rafts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 3vw, 40px);
	margin: clamp(36px, 6vh, 64px) 0 0;
	padding: 0;
	list-style: none;
}

.oc-rafts .oc-raft {
	padding-bottom: 54px;
}

.oc-rafts h3 {
	margin: 18px 0 10px;
}

.oc-rafts p {
	font-size: 16px;
	color: var(--oc-ink-2);
}

@media (max-width: 760px) {
	.oc-rafts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Surfacing (8.2): a raft that starts below the screen rises 40 px with a spring and a
   ripple when it first comes into view. It is never hidden; only oc-flow moves it. */
.oc-flow .oc-surface {
	transition: transform var(--oc-dur-surface) var(--oc-ease-float);
}

.oc-flow .oc-surface.is-low {
	transform: translateY(40px);
}

.oc-surface::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -10px;
	height: 20px;
	border: 1px solid var(--oc-pencil);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.oc-flow .oc-surface.is-landed::before {
	animation: oc-ring var(--oc-dur-ring) var(--oc-ease-out) 1;
}

@keyframes oc-ring {
	from {
		opacity: 1;
		transform: scale(.6);
	}

	to {
		opacity: 0;
		transform: scale(1.4);
	}
}

/* ---------- Year buoy ripple on hover and focus (8.2) ---------- */

.oc-year::after {
	content: "";
	position: absolute;
	inset: -1.5px;
	border: 1px solid var(--oc-pencil);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
}

.oc-flow .oc-year:hover::after,
.oc-flow .oc-year:focus-visible::after {
	animation: oc-ring var(--oc-dur-ring) var(--oc-ease-out) 1;
}

/* ---------- CSS floats: the Submit buoy and the 404 buoy (8.3) ---------- */

@keyframes oc-bob {
	50% {
		transform: translateY(-4px);
	}
}

.oc-flow .oc-band .oc-buoy {
	animation: oc-bob 5.5s ease-in-out infinite;
}

.oc-flow .oc-band .oc-buoy:hover,
.oc-flow .oc-band .oc-buoy:focus-visible {
	animation-play-state: paused;
}

.oc-flow .oc-drifter {
	animation: oc-bob 1.5s ease-in-out 3;
}

/* ---------- Winner year page: the drift zone (8.3, 8.4) ---------- */

.oc-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 22px;
}

.oc-steer {
	display: flex;
	align-items: center;
	gap: 10px;
}

.oc-drift {
	--oc-card-w: clamp(228px, 19vw, 280px);
}

/* A plain horizontal scroller: vertical wheel scrolling goes to the page (8.4) */
.oc-drift__track {
	position: relative;
	z-index: 1;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	touch-action: pan-x pan-y;
	/* room under the cards for their reflections, and the bank under the live waterline */
	padding: 44px 0 calc(clamp(200px, 21vw, 280px) + var(--oc-bank));
}

.oc-drift__track::-webkit-scrollbar {
	display: none;
}

.oc-js .oc-drift__track {
	cursor: grab;
}

.oc-drift__track.is-drag {
	cursor: grabbing;
	user-select: none;
}

.oc-works {
	display: flex;
	align-items: flex-end;
	gap: clamp(30px, 4vw, 64px);
	width: max-content;
	margin: 0;
	padding: 0 var(--oc-gut);
	list-style: none;
}

.oc-work {
	position: relative;
	flex: none;
	width: var(--oc-card-w);
}

.oc-works > .oc-work:nth-child(even) {
	margin-bottom: 34px;
}

.oc-still .oc-drift__track {
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--oc-gut);
}

.oc-still .oc-work {
	scroll-snap-align: start;
}

.oc-card--work .oc-card__art {
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--oc-mist);
	border-bottom: var(--oc-frame);
}

.oc-card--work .oc-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
}

.oc-card--work .oc-card__body {
	position: relative;
	padding: 30px 18px 34px;
}

.oc-card--work .oc-card__title {
	margin: 0;
}

.oc-card__who {
	margin-top: 4px;
	font-size: var(--oc-fs-meta);
	line-height: 1.4;
	color: var(--oc-pencil);
}

.oc-card--work .oc-rank {
	margin-top: 12px;
}

.oc-card__no {
	position: absolute;
	top: -23px;
	left: 16px;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: var(--oc-frame);
	border-radius: 50%;
	background: var(--oc-paper);
	font: 400 18px / 1 var(--oc-serif);
}

/* List view: a still grid of the same cards; the canvas and the steering buttons go away */
.oc-list .oc-drift__track {
	overflow: visible;
	cursor: auto;
	padding: 28px 0 110px;
}

.oc-list .oc-works {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 44px 28px;
	width: auto;
	max-width: calc(var(--oc-w-content) + 2 * var(--oc-gut));
	margin-inline: auto;
	padding-top: 12px;
}

.oc-list .oc-works > .oc-work {
	width: auto;
	margin-bottom: 0;
}

.oc-list .oc-drift .oc-water,
.oc-list .oc-drift::before,
.oc-list .oc-drift::after,
.oc-list .oc-steer {
	display: none;
}

@media (max-width: 760px) {
	.oc-drift {
		--oc-card-w: min(72vw, 300px);
	}

	.oc-drift__track {
		padding: 50px 0 calc(270px + var(--oc-bank));
	}

	.oc-list .oc-works {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 30px 14px;
	}

	.oc-list .oc-card__title {
		font-size: 18px;
	}

	.oc-list .oc-card--work .oc-card__body {
		padding: 28px 12px 32px;
	}
}

/* ---------- 404: the buoy that drifted away ---------- */

.oc-drifter {
	width: min(280px, 60vw);
}