/* Poetry Circle – tijdelijke landingspagina
   Tokens mirror the Figma text styles (Display/XL, Display/L, Display/M, Heading/Card title, Body/Link – Bold, Body/Small). */

/* ---------- Fonts (drop the files in /assets/fonts) ---------- */
@font-face {
	font-family: "PoetryCircle Sans";
	src: url("fonts/PoetryCircleSans-Regular.woff2") format("woff2"),
	     url("fonts/PoetryCircleSans-Regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heros";
	src: url("fonts/TeXGyreHeros-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "TeX Gyre Heros";
	src: url("fonts/TeXGyreHeros-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--pc-brown: #4b0800;
	--pc-pink: #ffaaff;
	--pc-red: #f03200;
	--pc-blue: #648cff;
	--pc-yellow: #fff5a5;

	--pc-font-display: "PoetryCircle Sans", "Helvetica Neue Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--pc-font-body: "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--pc-wrap: 78rem;                                /* 1248px */
	--pc-gutter: clamp(1.25rem, 6.67vw, 6rem);       /* 96px at 1440 */
	--pc-space: clamp(2rem, 3.9vw, 3.5rem);          /* 56px */
	--pc-gap: clamp(1rem, 1.67vw, 1.5rem);           /* 24px */
	--pc-radius: 12px;
}

/* ---------- Base (scoped reset; the old theme CSS is not loaded) ---------- */
:where(.pcl) *, :where(.pcl) *::before, :where(.pcl) *::after { box-sizing: border-box; }
html:has(body.pcl) { scroll-behavior: smooth; }
body.pcl {
	margin: 0;
	background: var(--pc-yellow);
	color: var(--pc-brown);
	font-family: var(--pc-font-body);
	font-size: 1.125rem;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
:where(.pcl) :is(h1, h2, p, ul) { margin: 0; padding: 0; }
:where(.pcl) ul { list-style: none; }
:where(.pcl) a { color: inherit; }
:where(.pcl) svg { display: block; }

.pcl-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}
.pcl-skip {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	padding: .75rem 1rem;
	background: var(--pc-brown); color: var(--pc-yellow);
	font-weight: 700; text-decoration: none;
	border-radius: 6px;
}
.pcl-skip:focus { top: 1rem; }
:where(.pcl) :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.pcl main:focus { outline: none; }

/* ---------- Type styles ---------- */
.pcl-display-xl,
.pcl-display-l,
.pcl-display-m,
.pcl-card__city {
	font-family: var(--pc-font-display);
	font-weight: 400;
	text-transform: uppercase;
	text-wrap: balance;
}
.pcl-display-xl {                                   /* Display/XL – Hero: 168 / 88% / -2% */
	font-size: clamp(3.25rem, 11.67vw, 10.5rem);
	line-height: .88;
	letter-spacing: -.02em;
}
.pcl-display-l {                                    /* Display/L – Section heading: 96 / 90% */
	font-size: clamp(2.5rem, 6.67vw, 6rem);
	line-height: .9;
}
.pcl-display-m {                                    /* Display/M – Statement link: 72 / 92% */
	font-size: clamp(2rem, 5vw, 4.5rem);
	line-height: .92;
}
.pcl-small { font-size: 1.125rem; }                 /* Body/Small: 18 */

/* ---------- Layout ---------- */
.pcl-section { padding: var(--pc-space) var(--pc-gutter); }
.pcl-wrap {
	max-width: var(--pc-wrap);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--pc-space);
}

/* Dotted rule, as in the composition posters */
.pcl-dots {
	--dot: 10px;
	--step: 24px;
	height: var(--dot);
	background-image: radial-gradient(circle at calc(var(--dot) / 2) 50%, currentColor calc(var(--dot) / 2 - .5px), transparent calc(var(--dot) / 2));
	background-size: var(--step) var(--dot);
	background-repeat: space no-repeat;
}
.pcl-dots--small { --dot: 6px; --step: 16px; }

/* ---------- Hero ---------- */
.pcl-hero {
	padding-bottom: calc(var(--pc-space) * 1.7);
	overflow: hidden;
	overflow: clip;                                  /* the animated headline may bend past the edges */
}

/* Headline as type on a path (pcl-type.js). The h1 stays for SEO and screen readers. */
.pcl-type { position: relative; }
.pcl-type__canvas { position: absolute; display: none; pointer-events: none; }
.pcl-type.is-live .pcl-type__canvas { display: block; }
.pcl-dots.is-path { visibility: hidden; }          /* redrawn on the canvas */
.pcl-type.is-live h1 {
	position: absolute; inset: 0;
	clip-path: inset(50%);
	color: transparent;
	user-select: none;
}
.pcl-logo { display: inline-block; width: clamp(180px, 20.8vw, 300px); text-decoration: none; }
.pcl-logo svg { width: 100%; height: auto; }

/* ---------- Sign-up ---------- */
.pcl-signup {
	background: var(--pc-brown);
	color: var(--pc-yellow);
	padding-block: calc(var(--pc-space) * 1.7);
}
.pcl-signup .pcl-wrap { gap: calc(var(--pc-space) * .85); }

.pcl-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--pc-gap);
}
@media (min-width: 40em)  { .pcl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68em)  { .pcl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pcl-card { --bg: var(--pc-yellow); --fg: var(--pc-brown); --code-h: clamp(3.5rem, 5vw, 4.5rem); display: flex; }
.pcl-card:nth-child(4n+2) { --bg: var(--pc-pink); }
.pcl-card:nth-child(4n+3) { --bg: var(--pc-blue); --fg: var(--pc-yellow); }
.pcl-card:nth-child(4n+4) { --bg: var(--pc-red);  --fg: var(--pc-yellow); }

.pcl-card__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-height: clamp(15rem, 23.6vw, 21.25rem);    /* 340px */
	padding: clamp(1.5rem, 2.2vw, 2rem);            /* 32px */
	background: var(--bg);
	color: var(--fg);
	border-radius: var(--pc-radius);
	text-decoration: none;
}
a.pcl-card__inner:focus-visible { outline-color: var(--pc-yellow); }

.pcl-card__code {
	display: flex;
	gap: clamp(.75rem, 1.1vw, 1rem);                /* 16px */
	height: var(--code-h);                           /* 72px */
}
.pcl-card__code svg { height: 100%; width: auto; }

.pcl-card__city {                                   /* Heading/Card title: 52 / 92% */
	font-size: clamp(2.25rem, 3.6vw, 3.25rem);
	line-height: .92;
	overflow-wrap: break-word;
	hyphens: auto;
}

/* Sticker-style dotted line at the top and bottom of the card: dots as big as the dots in the digits */
.pcl-card__rule {
	--dot: calc(var(--code-h) * 0.208);
	display: block;
	height: var(--dot);
	background-image: radial-gradient(circle at 50% 50%, var(--fg) calc(var(--dot) / 2 - .5px), transparent calc(var(--dot) / 2));
	background-size: calc(var(--dot) * 1.4) var(--dot);
	background-repeat: space no-repeat;
}
.pcl-card__partner {                                /* Body/Small: 18 */
	font-size: 1.125rem;
	line-height: 1.3;
	margin-top: -.5rem;
}

.pcl-card__foot {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.pcl-card__cta {                                    /* Body/Link – Bold: 22 */
	font-weight: 700;
	font-size: 1.375rem;
	text-underline-offset: .2em;
	text-decoration-thickness: 2px;
}
a.pcl-card__inner:hover .pcl-card__cta,
a.pcl-card__inner:focus-visible .pcl-card__cta { text-decoration: underline; }
.pcl-card__inner.is-soon .pcl-card__cta { font-weight: 400; }

/* ---------- More info ---------- */
.pcl-info { background: var(--pc-pink); padding-bottom: calc(var(--pc-space) * 1.15); }
.pcl-info .pcl-wrap { gap: calc(var(--pc-space) * .85); }
.pcl-info .pcl-display-m a { text-decoration: none; }

/* "Klik hier voor meer info …" behaves as one big button:
   no underline at rest, a normal underline on the whole text on hover/focus, the arrow nudges right. */
.pcl-more { display: inline; }
.pcl-more__text {
	text-decoration-line: none;
	text-decoration-thickness: .06em;
	text-underline-offset: .1em;
}
.pcl-more__arrow {
	display: inline-block;
	transition: transform .25s ease;
}
.pcl-more:hover .pcl-more__text,
.pcl-more:focus-visible .pcl-more__text { text-decoration-line: underline; }
.pcl-more:hover .pcl-more__arrow,
.pcl-more:focus-visible .pcl-more__arrow { transform: translateX(.25em); }

/* "… vind je hier." – an inline link inside the sentence keeps a normal underline so it is recognisable */
.pcl-info .pcl-display-m a.pcl-inline-link {
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-underline-offset: .1em;
}

@media (prefers-reduced-motion: reduce) {
	.pcl-more__arrow { transition: none; }
}

.pcl-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: calc(var(--pc-space) * .3);
}
.pcl-logo--small { width: 180px; }

@media (prefers-reduced-motion: reduce) {
	html:has(body.pcl) { scroll-behavior: auto; }
}