/*
 * Templates of the output-canal child theme: the layouts of the Elementor theme builder
 * templates and of the static pages (spec 8.3), and the bridge to the platform stylesheets.
 *
 * 1. Platform bridge. Hello Elementor's reset and Elementor's frontend stylesheet style bare
 *    elements (button hover colours, link colours, table zebra rows, ".elementor a" without
 *    underline or box-shadow, ".elementor img"). Where those rules would beat the design, the
 *    design is restated here with ":is(.elementor, body)" in front: it matches everywhere and
 *    adds one class to the specificity, whatever the load order.
 * 2. Elementor containers are neutral shells (.oc-shell): the layout is in the theme markup.
 * 3. The layouts, page by page.
 * Colours: only the brand swatches (tokens.css); radii: 0 and 50% only.
 */

/* ---------- 1. Platform bridge ---------- */

:is(.elementor, body) a:hover,
:is(.elementor, body) a:active {
	color: inherit;
}

/* Links that carry their own colours keep them on hover (Hello Elementor turns links blue) */
:is(.elementor, body) .oc-buoy:is(:hover, :active, :focus) {
	color: var(--oc-paper);
}

:is(.elementor, body) .oc-band .oc-buoy:is(:hover, :active, :focus) {
	color: var(--oc-ink);
}

:is(.elementor, body) :is(.oc-ring, .oc-year, .oc-seg > a)[aria-current="page"]:is(:hover, :active) {
	color: var(--oc-paper);
}

/* The buoy rings are box-shadows; ".elementor a" removes box-shadows from links */
:is(.elementor, body) .oc-buoy {
	box-shadow: 0 0 0 6px var(--oc-paper), 0 0 0 7.5px var(--oc-ink);
}

:is(.elementor, body) .oc-band .oc-buoy {
	box-shadow: 0 0 0 6px var(--oc-deep), 0 0 0 7.5px var(--oc-paper);
}

:is(.elementor, body) .oc-link {
	text-decoration: underline wavy var(--oc-ink-2) 1.5px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

:is(.elementor, body) .oc-link:hover {
	text-decoration-color: var(--oc-ink);
	text-decoration-thickness: 2px;
}

:is(.elementor, body) .oc-prose a {
	text-decoration: underline solid var(--oc-ink-2) 1px;
	text-underline-offset: 3px;
}

:is(.elementor, body) .oc-prose a:hover {
	text-decoration-style: wavy;
	text-decoration-thickness: 1.5px;
	text-decoration-skip-ink: none;
}

:is(.elementor, body) .oc-crumbs a {
	text-decoration: underline solid var(--oc-stone) 1px;
	text-underline-offset: 3px;
}

:is(.elementor, body) .oc-crumbs a:hover {
	text-decoration: underline wavy var(--oc-pencil) 1.5px;
	text-decoration-skip-ink: none;
}

/* Focus (8.1.7): the ring and the halo, also on links inside Elementor documents */
:is(.elementor, body) :focus-visible {
	outline: 2px solid var(--oc-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--oc-focus-gap), 0 0 0 8px var(--oc-blue);
}

:is(.elementor, body) [tabindex="-1"]:focus-visible,
:is(.elementor, body) .oc-card__link:focus-visible,
:is(.elementor, body) .oc-jury__link:focus-visible {
	outline: none;
	box-shadow: none;
}

:is(.elementor, body) .oc-buoy:focus-visible {
	outline: 2px solid var(--oc-ink);
	outline-offset: 12px;
	box-shadow: 0 0 0 6px var(--oc-paper), 0 0 0 7.5px var(--oc-ink), 0 0 0 12px var(--oc-paper), 0 0 0 17px var(--oc-blue);
}

:is(.elementor, body) .oc-band .oc-buoy:focus-visible {
	outline-color: var(--oc-paper);
	box-shadow: 0 0 0 6px var(--oc-deep), 0 0 0 7.5px var(--oc-paper), 0 0 0 12px var(--oc-deep), 0 0 0 17px var(--oc-blue);
}

/* Buttons: Hello Elementor colours every button on hover and focus; restate each state */
:is(.elementor, body) .oc-waves,
:is(.elementor, body) .oc-waves:is(:hover, :focus) {
	background: none;
	color: var(--oc-ink);
	border: 0;
	border-radius: 0;
}

:is(.elementor, body) .oc-menu-btn,
:is(.elementor, body) .oc-menu-btn:focus {
	background: var(--oc-paper);
	color: var(--oc-ink);
	border: var(--oc-frame);
	border-radius: 0;
}

:is(.elementor, body) .oc-menu-btn:hover {
	background: var(--oc-stone);
}

:is(.elementor, body) .oc-seg > button,
:is(.elementor, body) .oc-seg > button:focus {
	background: var(--oc-paper);
	color: var(--oc-ink);
	border-radius: 0;
	border-top: 0;
	border-bottom: 0;
	border-right: 0;
	font: 500 var(--oc-fs-button) / 1 var(--oc-sans);
}

:is(.elementor, body) .oc-seg > button:first-child {
	border-left: 0;
}

:is(.elementor, body) .oc-seg > button:hover {
	background: var(--oc-stone);
}

:is(.elementor, body) .oc-seg > button[aria-pressed="true"] {
	background: var(--oc-ink);
	color: var(--oc-paper);
}

:is(.elementor, body) button.oc-ring,
:is(.elementor, body) button.oc-ring:focus {
	background: var(--oc-paper);
	color: var(--oc-ink);
	border: var(--oc-frame);
	border-radius: 50%;
	padding: 0;
}

:is(.elementor, body) button.oc-ring:hover {
	background: var(--oc-stone);
}

:is(.elementor, body) button.oc-ring[aria-disabled="true"] {
	background: var(--oc-paper);
	color: var(--oc-pencil);
}

:is(.elementor, body) .oc-search button,
:is(.elementor, body) .oc-search button:focus {
	background: var(--oc-ink);
	color: var(--oc-paper);
	border: 0;
	border-radius: 0;
	padding: 0;
}

:is(.elementor, body) .oc-search button:hover {
	background: var(--oc-ink-2);
}

/* Tables: no zebra rows, no side borders */
:is(.elementor, body) :is(.oc-prose, .oc-table) :is(th, td),
:is(.elementor, body) :is(.oc-prose, .oc-table) tbody > tr:nth-child(n) > :is(th, td) {
	border: 0;
	border-bottom: var(--oc-rule);
	background: none;
}

/* The parent theme's reset also draws a translucent grey rule above the first header row
   (table thead:first-child tr:first-child th, specificity 0,2,4): not a swatch, removed */
:is(.elementor, body) :is(.oc-prose, .oc-table) thead tr:first-child > :is(th, td) {
	border-block-start: 0;
}

:is(.elementor, body) :is(.oc-prose, .oc-table) table,
:is(.elementor, body) table.oc-table {
	margin: 0;
	font-size: 16px;
}

:is(.elementor, body) .oc-prose figcaption,
:is(.elementor, body) .oc-caption {
	font-style: normal;
	color: var(--oc-pencil);
}

/* Images that fill a frame */
:is(.elementor, body) :is(.oc-card__media, .oc-card__art, .oc-portrait, .oc-frame, .oc-logo) img {
	height: 100%;
}

:is(.elementor, body) .oc-frame img {
	width: 100%;
	object-fit: cover;
}

/* The skip link that Hello Elementor prints (also .screen-reader-text) */
:is(.elementor, body) .skip-link.screen-reader-text:focus {
	top: 8px;
	left: var(--oc-gut);
	z-index: 100;
	padding: 12px 16px;
	background: var(--oc-ink);
	color: var(--oc-paper);
	font: 600 15px / 1 var(--oc-sans);
}

/* ---------- 2. Elementor shells ---------- */

.e-con.oc-shell,
.oc-shell .e-con {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
}

/* The sticky header: the theme builder location is the box that sticks (8.3) */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .elementor-location-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.elementor-location-header .oc-head {
	position: relative;
}

/* The ripple under a surfacing raft grows to 1.4 times for 600 ms; on narrow screens it would
   reach past the screen edge and make the page scrollable sideways for that moment. clip (not
   hidden) keeps the main element from becoming a scroll container. */
.oc-main {
	display: block;
	overflow-x: clip;
}

/* A section of a menu (a year page is in Winner): the same lime dot as the current page */
.oc-nav a[aria-current="true"]::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 2px;
	width: 8px;
	height: 8px;
	margin-left: -4px;
	border-radius: 50%;
	background: var(--oc-lime);
	box-shadow: 0 0 0 1.5px var(--oc-ink);
}

.oc-menu a[aria-current] {
	text-decoration: underline wavy var(--oc-ink-2) 1.5px;
	text-underline-offset: 8px;
	text-decoration-skip-ink: none;
}

.oc-logo__text {
	font: 500 15px / 1.1 var(--oc-serif);
}

/* ---------- 3. Layouts ---------- */

/* Common pieces */
.oc-listing {
	padding-top: var(--oc-s-7);
	padding-bottom: var(--oc-section-y);
}

.oc-switch {
	padding-top: var(--oc-s-6);
}

.oc-empty {
	color: var(--oc-ink-2);
}

.oc-crumbbar {
	padding-top: clamp(18px, 3.5vw, 40px);
}

.oc-card .oc-card__media--empty,
.oc-card .oc-card__art--empty {
	background: var(--oc-sea);
}

.oc-card__date {
	margin: 0;
	font: 400 var(--oc-fs-meta) / 1.4 var(--oc-sans);
	letter-spacing: 0;
	color: var(--oc-pencil);
}

h2.oc-card__title,
h3.oc-card__title {
	font: 500 var(--oc-fs-card) / 1.2 var(--oc-serif);
	letter-spacing: 0;
	font-variation-settings: normal;
}

.oc-cards--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.oc-cards--four .oc-card__title {
	font-size: 19px;
}

@media (max-width: 1040px) {
	.oc-cards--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

.oc-pagination {
	margin-top: var(--oc-s-8);
}

.oc-pagination .oc-pager {
	justify-content: center;
}

.oc-pager__gap {
	min-width: 20px;
	text-align: center;
	color: var(--oc-pencil);
}

/* Frames: square-cornered image boxes with a waterline at the bottom edge */
.oc-frame {
	position: relative;
	margin: 0;
	overflow: hidden;
	background: var(--oc-mist);
	border: var(--oc-frame);
}

.oc-frame::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
	background: var(--oc-waterline) 0 100% / 40px 12px repeat-x;
}

/* ---------- Home page: the images in their V1 roles, and the news ----------
   Edition key visual (the 2026 collage of the key visuals of every edition) as a full-width
   band right after the first view, with the history raft and the statistic buoys below it
   (owner request 2026-10-20); the Grand Prix (the only winning work, framed); the trophy
   photo beside the values head; the event photos as a plain strip. Only the Grand Prix uses
   a frame. */

:is(.elementor, body) :is(.oc-keyvisual, .oc-trophy, .oc-moments__row) img {
	display: block;
	width: 100%;
	height: auto;
}

.oc-keyvisual,
.oc-trophy {
	margin: 0;
}

/* The full-width key visual: edge to edge (no side gutter, also on phones) up to the file's
   own width, 1445px (attachment 3594), and centred on paper above that, so it is never
   upscaled. The whole image at its natural aspect ratio (width and height attributes of the
   full-size file), original colours, no frame, nothing laid over it. The figure spans the
   page; the image itself is capped and centred (Elementor resets figure margins). */
.oc-edition {
	padding-top: clamp(16px, 3vw, 40px);
}

:is(.elementor, body) .oc-keyvisual--full img {
	max-width: 1445px;
	margin-inline: auto;
	object-fit: contain;
}

/* The assembly of the key visual (spec 8.3 home; assets/js/assemble.js), only while its pieces
   move (.oc-kv-on): the real image is transparent (still in the page and the accessibility
   tree) and the piece layer lies exactly over it. Each piece clips a copy of the same image on
   whole pixels, so the docked pieces look exactly like the image. The lower edge of the image
   is the water surface: what is below it is under water (not drawn). Nothing here changes the
   layout; without the class the figure is exactly as before. */
.oc-kv-on {
	position: relative;
	overflow: hidden; /* fallback: no page overflow while pieces sit outside the image */
	overflow-x: clip;
	overflow-y: visible;
}

:is(.elementor, body) .oc-kv-on > img {
	opacity: 0;
}

.oc-kv-layer {
	position: absolute;
	pointer-events: none;
}

.oc-kv-tiles,
.oc-kv-rings {
	position: absolute;
	inset: 0;
}

.oc-kv-tiles {
	clip-path: inset(-100vh -100vw 0 -100vw);
}

.oc-kv-tile {
	position: absolute;
	overflow: hidden;
	transform-origin: 50% 100%;
}

:is(.elementor, body) .oc-kv-layer .oc-kv-tile > img {
	position: absolute;
	max-width: none;
	margin: 0;
	object-fit: fill;
}

/* The piece under water: its part of the image drawn small and shown at full size (soft, no
   fine detail), over the sharp copy; it fades out as the piece slows at the surface. */
.oc-kv-soft {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}

/* One ring along the lower seam of a piece as it docks (the raft ring of 8.2, 1px #6D6D6D). */
.oc-kv-ring {
	position: absolute;
	border: 1px solid var(--oc-pencil);
	border-radius: 50%;
	opacity: 0;
}

@media print {
	.oc-kv-layer {
		display: none;
	}

	:is(.elementor, body) .oc-kv-on > img {
		opacity: 1;
	}
}

.oc-edition__in {
	padding-top: clamp(40px, 6vw, 88px);
}

.oc-edition__raft {
	margin-inline: auto;
}

/* A proper noun in a statistic buoy (Amsterdam) is wrapped in .keep-case: it keeps the size of
   the buoy word instead of taking the label style of ".oc-stat span" (water.css). */
.oc-stat b > .keep-case {
	display: inline;
	max-width: none;
	margin: 0;
	font: inherit;
	color: inherit;
}

.oc-grandprix {
	padding: var(--oc-section-y) 0;
}

.oc-grandprix__in {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: end;
	gap: clamp(24px, 4vw, 56px);
}

.oc-frame--feature {
	aspect-ratio: 4 / 3;
}

.oc-grandprix__raft h2 {
	margin: 10px 0 12px;
	font-size: clamp(30px, 3.6vw, 48px);
}

.oc-grandprix__raft h2 a {
	text-decoration: none;
}

.oc-grandprix__raft h2 a:hover {
	text-decoration: underline wavy var(--oc-pencil) 1.5px;
	text-underline-offset: 7px;
	text-decoration-skip-ink: none;
}

.oc-grandprix__work {
	font: italic 400 var(--oc-fs-tagline) / 1.22 var(--oc-serif);
	color: var(--oc-ink-2);
}

.oc-values__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(24px, 4vw, 56px);
}

.oc-moments {
	padding: clamp(48px, 7vw, 88px) 0 var(--oc-section-y);
}

.oc-moments__row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 760px) {
	.oc-stat span {
		max-width: 100px;
	}

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

	.oc-moments__row {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}
}

.oc-news {
	padding: var(--oc-section-y) 0;
}

.oc-news__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px 24px;
	margin-bottom: var(--oc-s-7);
}

/* ---------- Single article ---------- */

.oc-pagehead--entry h1 {
	max-width: 22ch;
}

.oc-entry__media {
	max-width: var(--oc-w-wide);
	margin: var(--oc-s-7) 0 0;
}

.oc-entry__media img {
	width: 100%;
}

.oc-entry__body {
	padding-top: var(--oc-s-7);
	padding-bottom: var(--oc-s-8);
}

.oc-pn {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 28px;
	padding: var(--oc-s-6) 0;
	border-top: var(--oc-rule);
	border-bottom: var(--oc-rule);
}

.oc-pn__link {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.oc-pn__link--next {
	grid-column: 2;
	flex-direction: row-reverse;
	text-align: right;
}

.oc-pn__text {
	display: grid;
	gap: 4px;
}

.oc-pn__title {
	font: 500 18px / 1.3 var(--oc-serif);
}

.oc-pn__link:hover .oc-pn__title {
	text-decoration: underline wavy var(--oc-pencil) 1.5px;
	text-underline-offset: 5px;
	text-decoration-skip-ink: none;
}

.oc-pn__link:hover .oc-ring {
	background: var(--oc-stone);
}

.oc-related {
	padding-top: var(--oc-s-8);
	padding-bottom: var(--oc-section-y);
}

.oc-related h2 {
	margin-bottom: var(--oc-s-6);
}

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

	.oc-pn__link--next {
		grid-column: 1;
	}
}

/* ---------- Winner year page ---------- */

.oc-pagehead--year .oc-tools {
	margin-top: 22px;
}

.oc-otheryears {
	margin-top: 18px;
}

/* A year without works: the heading is the whole page; keep its waterline off the footer's */
.oc-pagehead--alone {
	margin-bottom: var(--oc-section-y);
}

.oc-yearpage .oc-pagehead {
	padding-bottom: clamp(36px, 5vw, 56px);
}

/* The first work starts at the left edge of the page column (the canal view) */
html:not(.oc-list) .oc-yearpage .oc-works {
	padding-inline: max(var(--oc-gut), calc((100% - var(--oc-w-content)) / 2));
}

.oc-still .oc-yearpage .oc-drift__track {
	scroll-padding-inline: max(var(--oc-gut), calc((100% - var(--oc-w-content)) / 2));
}

/* /winner/: the same cards in a still grid */
.oc-works--grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
	gap: 44px 28px;
	width: auto;
	padding: 12px 0 0;
}

.oc-works--grid > .oc-work,
.oc-works--grid > .oc-work:nth-child(even) {
	width: auto;
	margin-bottom: 0;
}

.oc-works--grid {
	align-items: start;
}

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

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

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

h2.oc-rank {
	margin: 0 0 10px;
	font: 600 var(--oc-fs-tag) / 1 var(--oc-sans);
	letter-spacing: .02em;
	font-variation-settings: normal;
}

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

/* ---------- Single winning work ---------- */

.oc-work-page {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-areas: "art data" "art text";
	align-items: start;
	gap: 32px clamp(28px, 4vw, 64px);
	padding-top: var(--oc-s-6);
	padding-bottom: var(--oc-s-8);
}

.oc-work-page--noimage {
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "data" "text";
	max-width: calc(var(--oc-w-prose) + 2 * var(--oc-gut));
}

.oc-work-page__art {
	grid-area: art;
	position: relative;
	margin: 0;
	padding: 18px;
	background: var(--oc-white);
	border: var(--oc-frame);
}

.oc-work-page__art::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 12px;
	background: var(--oc-waterline) 0 100% / 40px 12px repeat-x;
}

.oc-work-page__art img {
	width: 100%;
	margin-bottom: 12px;
}

.oc-work-page__data {
	grid-area: data;
}

.oc-work-page__data h1 {
	margin: 14px 0 6px;
}

.oc-work__text {
	grid-area: text;
}

.oc-facts {
	display: grid;
	gap: 10px;
	margin: 18px 0 0;
}

.oc-facts div {
	display: grid;
	grid-template-columns: 7.5em minmax(0, 1fr);
	gap: 12px;
	padding-top: 10px;
	border-top: var(--oc-rule);
}

.oc-facts dt {
	font: 600 14px / 1.4 var(--oc-sans);
}

.oc-facts dd {
	margin: 0;
}

.oc-work-page__nav {
	padding-bottom: var(--oc-section-y);
}

.oc-back {
	margin-top: var(--oc-s-6);
}

@media (max-width: 760px) {
	.oc-work-page {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "art" "data" "text";
	}

	.oc-work-page__art {
		padding: 12px;
	}
}

/* ---------- Jury ---------- */

.oc-jury__item h2 {
	margin: 0;
	letter-spacing: 0;
	font-variation-settings: normal;
}

h2.oc-jury__name {
	font: 500 20px / 1.25 var(--oc-serif);
}

h2.oc-jury__role {
	margin-top: 6px;
	font: 400 var(--oc-fs-meta) / 1.4 var(--oc-sans);
	color: var(--oc-ink-2);
}

.oc-jury__link {
	text-decoration: none;
}

.oc-jury__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.oc-jury__item:hover .oc-jury__link {
	text-decoration: underline wavy var(--oc-pencil) 1.5px;
	text-underline-offset: 5px;
	text-decoration-skip-ink: none;
}

.oc-jury__item:has(.oc-jury__link:focus-visible) {
	outline: 2px solid var(--oc-ink);
	outline-offset: 6px;
	box-shadow: 0 0 0 8px var(--oc-paper), 0 0 0 11px var(--oc-blue);
}

.oc-portrait--empty {
	background: var(--oc-sea);
}

.oc-jury-page {
	display: grid;
	grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
	align-items: start;
	gap: 32px clamp(32px, 6vw, 96px);
	padding-top: var(--oc-s-7);
	padding-bottom: var(--oc-section-y);
}

.oc-portrait--large {
	width: min(100%, 360px);
	margin: 8px 0 0;
}

.oc-jury-page__text h1 {
	margin: 0 0 10px;
}

.oc-jury-page__role {
	color: var(--oc-ink-2);
}

.oc-jury-page__site {
	margin-top: 8px;
}

.oc-jury-page__text .oc-prose {
	margin-top: var(--oc-s-6);
}

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

	.oc-portrait--large {
		width: min(70vw, 300px);
		margin-inline: auto;
	}
}

@media (forced-colors: active) {
	.oc-jury__item:has(.oc-jury__link:focus-visible) {
		outline: 2px solid Highlight;
		box-shadow: none;
	}
}

/* ---------- Search results and 404 ---------- */

.oc-results {
	padding-top: var(--oc-s-7);
	padding-bottom: var(--oc-section-y);
}

.oc-searchform {
	max-width: 520px;
}

.oc-results__count {
	margin: var(--oc-s-6) 0 var(--oc-s-4);
	color: var(--oc-ink-2);
}

.oc-resultlist {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: var(--oc-rule);
}

.oc-result {
	padding: 22px 0;
	border-bottom: var(--oc-rule);
}

.oc-result__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 14px;
}

h2.oc-result__date {
	font: 400 var(--oc-fs-meta) / 1.4 var(--oc-sans);
	letter-spacing: 0;
	color: var(--oc-pencil);
	font-variation-settings: normal;
}

h2.oc-result__title {
	margin: 8px 0 6px;
	font: 500 var(--oc-fs-h3) / 1.2 var(--oc-serif);
	letter-spacing: 0;
	font-variation-settings: normal;
}

.oc-result__text {
	max-width: 68ch;
	color: var(--oc-ink-2);
}

.oc-result__path {
	margin-top: 6px;
	font-size: var(--oc-fs-meta);
	color: var(--oc-pencil);
}

.oc-results__none {
	max-width: 680px;
	margin-top: var(--oc-s-5);
}

.oc-results__none .oc-lede {
	margin-bottom: 10px;
}

.oc-results__none .oc-btns {
	margin-top: var(--oc-s-5);
}

.oc-notfound {
	position: relative;
	padding: clamp(40px, 7vw, 96px) 0 var(--oc-section-y);
}

.oc-notfound__in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 32px;
}

.oc-notfound h1 {
	margin-bottom: 18px;
}

.oc-notfound .oc-intro {
	margin-bottom: var(--oc-s-6);
}

.oc-notfound .oc-btns {
	margin-top: var(--oc-s-6);
}

/* Only the buoy of the drawing floats (three times, water.css); the water stays put */
.oc-flow .oc-drifter {
	animation: none;
}

.oc-drifter__buoy {
	transform-box: fill-box;
	transform-origin: center;
}

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

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

	.oc-drifter {
		justify-self: end;
		width: min(220px, 60vw);
	}
}

/* ---------- Text pages: zones (About, Submit, Winner Collection) ----------
   Paper and mist zones; a waterline only at the top edge of a zone that follows another one;
   no water texture behind text. */

.oc-zone {
	position: relative;
	padding: clamp(56px, 8vw, 112px) 0;
}

.oc-zone--mist {
	background: var(--oc-mist);
}

.oc-zone + .oc-zone::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 12px;
	background: var(--oc-waterline) 0 100% / 40px 12px repeat-x;
}

:is(.oc-about, .oc-submitpage, .oc-winners) h2 {
	margin: 0 0 16px;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.1;
}

:is(.oc-about, .oc-submitpage, .oc-winners) .oc-prose {
	max-width: 68ch;
	margin-inline: 0;
	font-size: var(--oc-fs-body);
	line-height: 1.6;
}

/* ---------- About ---------- */

/* First view: the ceremony photo with the statistic buoys afloat on its lower edge */
.oc-aboutlead {
	padding-top: clamp(28px, 3vw, 44px);
}

.oc-aboutlead__photo {
	margin: 0;
	aspect-ratio: 5 / 2;
	overflow: hidden;
	background: var(--oc-mist);
}

:is(.elementor, body) .oc-aboutlead__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 45%;
}

.oc-aboutlead .oc-stats--lead {
	position: relative;
	gap: clamp(14px, 1.6vw, 24px);
	margin-top: calc(clamp(150px, 14vw, 200px) / -2);
	padding: 0;
}

/* The edition text with the short "About" note beside it */
.oc-aboutintro {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	align-items: start;
	gap: clamp(32px, 5vw, 80px);
}

.oc-about .oc-aboutintro__main h2 {
	font-size: clamp(32px, 3.6vw, 50px);
}

.oc-about .oc-aboutintro__main .oc-prose {
	font-size: var(--oc-fs-prose);
}

.oc-aboutintro__note {
	margin-top: 6px;
}

/* The entry rules: one panel, one row per rule */
.oc-rules {
	background: var(--oc-paper);
	border: var(--oc-frame);
}

.oc-rules__row {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(12px, 3vw, 48px);
	padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 40px);
}

.oc-rules__row + .oc-rules__row {
	border-top: var(--oc-line) solid var(--oc-foam);
}

.oc-about .oc-rules__row h2 {
	margin: 0;
	font-size: clamp(24px, 2.2vw, 30px);
}

/* Dates and Categories side by side */
.oc-aboutplan {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	align-items: start;
	gap: clamp(40px, 6vw, 96px);
}

/* Dates: a static gauge, one ring per date on a ruled line */
.oc-gauge {
	position: relative;
	margin: 8px 0 0;
	padding: 0 0 0 34px;
	list-style: none;
}

.oc-gauge::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 8px;
	width: 8px;
	border-left: var(--oc-line) solid var(--oc-ink);
	background: repeating-linear-gradient(to bottom, var(--oc-pencil) 0 1px, transparent 1px 14px) 0 0 / 8px 100% no-repeat;
}

.oc-gauge li {
	position: relative;
	padding: 0 0 24px;
}

.oc-gauge li:last-child {
	padding-bottom: 0;
}

.oc-gauge li::before {
	content: "";
	position: absolute;
	top: 3px;
	left: -34px;
	box-sizing: border-box;
	width: 18px;
	height: 18px;
	border: var(--oc-frame);
	border-radius: 50%;
	background: var(--oc-paper);
}

.oc-gauge strong {
	display: block;
	font: 400 21px / 1.2 var(--oc-serif);
}

.oc-gauge span {
	display: block;
	margin-top: 4px;
	font: 500 var(--oc-fs-meta) / 1.4 var(--oc-sans);
	color: var(--oc-ink-2);
}

/* Categories: the SDG image and the 17 goals in columns */
.oc-cats__in {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	align-items: start;
	gap: clamp(20px, 3vw, 40px);
	margin-top: 22px;
}

.oc-about__goals {
	margin: 0;
}

:is(.elementor, body) .oc-about__goals img {
	width: 100%;
	height: auto;
}

.oc-about .oc-goals {
	max-width: none;
}

.oc-goals ol {
	margin: 0;
	padding-inline-start: 1.6em;
	columns: 2;
	column-gap: 32px;
}

.oc-goals li {
	margin: 0 0 6px;
	break-inside: avoid;
}

/* Evaluation criteria as four tiles, then the FAQ */
.oc-aboutjudge {
	display: grid;
	gap: clamp(56px, 8vw, 112px);
}

.oc-tiles {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2vw, 24px);
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.oc-tile {
	padding: 22px 22px 26px;
	background: var(--oc-paper);
	border: var(--oc-frame);
	font-size: var(--oc-fs-body);
	line-height: 1.55;
	color: var(--oc-ink-2);
}

.oc-tile strong {
	display: block;
	margin-bottom: 10px;
	font: 400 21px / 1.2 var(--oc-serif);
	color: var(--oc-ink);
}

.oc-tile .oc-dash {
	display: none;
}

.oc-faq__list {
	max-width: 860px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	border-top: var(--oc-frame);
}

.oc-faq__item {
	border-bottom: var(--oc-frame);
}

.oc-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 44px;
	padding: 16px 4px;
	font: 400 20px / 1.3 var(--oc-serif);
	list-style: none;
	cursor: pointer;
}

.oc-faq__item summary::-webkit-details-marker {
	display: none;
}

/* Plus sign in a ring; a minus when open (drawn, no text) */
.oc-faq__item summary::after {
	content: "";
	flex: none;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border: var(--oc-frame);
	border-radius: 50%;
	background:
		linear-gradient(var(--oc-ink), var(--oc-ink)) center / 12px 1.5px no-repeat,
		linear-gradient(var(--oc-ink), var(--oc-ink)) center / 1.5px 12px no-repeat;
}

.oc-faq__item[open] summary::after {
	background: linear-gradient(var(--oc-ink), var(--oc-ink)) center / 12px 1.5px no-repeat;
}

.oc-faq__item summary:hover {
	text-decoration: underline wavy var(--oc-pencil) 1.5px;
	text-underline-offset: 6px;
	text-decoration-skip-ink: none;
}

.oc-faq__item .oc-prose {
	padding: 0 4px 22px;
}

.oc-faq__item .oc-prose p {
	margin: 0;
}

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

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

@media (max-width: 760px) {
	.oc-aboutlead__photo {
		aspect-ratio: 3 / 2;
	}

	.oc-aboutlead .oc-stats--lead {
		margin-top: -40px;
	}

	.oc-aboutintro,
	.oc-rules__row,
	.oc-cats__in,
	.oc-tiles {
		grid-template-columns: minmax(0, 1fr);
	}

	.oc-goals ol {
		columns: 1;
	}
}

/* ---------- Winner collection ---------- */

.oc-winners__intro {
	max-width: 640px;
}

.oc-winners .oc-winners__intro h2 {
	font-size: clamp(32px, 3.6vw, 50px);
}

.oc-winners__intro p {
	color: var(--oc-ink-2);
}

.oc-yearsnav {
	margin: clamp(40px, 6vw, 72px) 0 0;
}

.oc-winners .oc-rules__row h2 {
	margin: 0;
	font-size: clamp(24px, 2.2vw, 30px);
}

:is(.elementor, body) .oc-announce h2 a {
	text-decoration: underline wavy var(--oc-pencil) 1.5px;
	text-underline-offset: 7px;
	text-decoration-skip-ink: none;
}

:is(.elementor, body) .oc-announce h2 a:hover {
	text-decoration-color: var(--oc-ink);
}

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

/* ---------- Ranking ---------- */

.oc-ranking {
	padding: var(--oc-s-8) 0 var(--oc-section-y);
}

.oc-ranking__intro {
	max-width: 820px;
	margin-bottom: clamp(40px, 6vw, 72px);
}

.oc-ranking__intro .oc-prose {
	max-width: none;
}

.oc-ranking h2 {
	margin-bottom: var(--oc-s-6);
}

.oc-table td a {
	text-decoration: underline solid var(--oc-ink-2) 1px;
	text-underline-offset: 3px;
}

:is(.elementor, body) .oc-table td a:hover {
	text-decoration-style: wavy;
	text-decoration-skip-ink: none;
}

/* The column names are site text (lower case); the cells are data (case kept) */
.oc-table th {
	text-transform: lowercase;
}

:is(.elementor, body) .oc-table td.oc-table__rank {
	width: 4.5em;
	font: 400 19px / 1.3 var(--oc-serif);
}

/* Narrow screens: each row is a block (components.css); one rule under the row only */
@media (max-width: 760px) {
	:is(.elementor, body) .oc-table--stack tbody > tr:nth-child(n) > :is(td, th) {
		border: 0;
	}

	:is(.elementor, body) .oc-table--stack td,
	:is(.elementor, body) .oc-table--stack td.oc-table__rank {
		width: auto;
		grid-template-columns: 6.5rem minmax(0, 1fr);
		padding: 3px 0;
	}

	:is(.elementor, body) .oc-table--stack td.oc-table__rank {
		font-size: 18px;
	}
}

/* ---------- Submit ---------- */

/* The V1 text beside the 2026 edition key visual, then the entry band */
.oc-submitlead {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	align-items: center;
	gap: clamp(32px, 5vw, 80px);
}

.oc-submitpage .oc-submitlead h2 {
	font-size: clamp(32px, 3.6vw, 50px);
}

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

.oc-submitlead h3 {
	margin-bottom: 14px;
	font-family: var(--oc-sans);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .02em;
}

.oc-submit .oc-band {
	margin-bottom: var(--oc-section-y);
}

/* Room for the buoy rings and the 12 px focus offset at the left edge of the column */
.oc-submit .oc-band .oc-buoy {
	margin-inline-start: 20px;
}

/* ---------- Legal pages ---------- */

.oc-legal .oc-prose {
	margin-inline: 0;
}

/* Separator blocks of the long-form content (Terms and Conditions): a palette line instead of
   the mid grey that the block styles give */
:is(.elementor, body) .oc-prose hr {
	height: 0;
	margin: 2em 0;
	border: 0;
	border-top: var(--oc-line) solid var(--oc-foam);
	color: var(--oc-foam);
	background: none;
	opacity: 1;
}

/* ---------- Narrow screens: keep long words inside the column ---------- */

.oc-card__title,
.oc-pn__title,
.oc-result__title,
.oc-jury__name,
.oc-table td {
	overflow-wrap: break-word;
}