/* Home honeycomb: labelled hexagons drawn in CSS with real text (one artistic typeface per project)
   plus a tiny hexagon in one of the four non-horizontal corners. Sizes use container units (cqw) so the type scales with the tile. */
.hex-link a {
	container-type: inline-size;
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 115 / 99;
	line-height: 1;
	text-decoration: none;
	background:
		radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
		linear-gradient(165deg, var(--c1, #cfe6b8), var(--c2, #8fc070));
}
.hex-link a .hex-name {
	clip-path: none; transition: none;
	position: relative; z-index: 2;
	display: block; width: 78%;
	text-align: center; text-wrap: balance; overflow-wrap: normal;
	font-size: 12cqw; line-height: 1.04;
	color: var(--ink, #2f4a22);
	text-shadow: var(--ink-shadow, 0 1px 0 rgba(255, 255, 255, .35));
}
.hex-dot {
	position: absolute; z-index: 2; display: block;
	width: 12.17%; aspect-ratio: 115 / 99;
	background: var(--dot, rgba(255, 255, 255, .75));
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
/* tiny corner hexagon: nested into the corner with a uniform 6px gap (at 115px) from both the flat edge and the slanted edge */
.dot-tl { left: 24.96%; top: 6.06%; }
.dot-tr { left: 62.87%; top: 6.06%; }
.dot-bl { left: 24.96%; top: 81.77%; }
.dot-br { left: 62.87%; top: 81.77%; }

/* one face, palette and size per project */
.hx-euro          { --c1: #d3eaef; --c2: #86bfcd; --ink: #1c4553; --dot: rgba(255, 255, 255, .8); }
.hex-link.hx-euro a .hex-name          { font-family: 'Hex euro', Georgia, serif; font-weight: 700; font-size: 12.5cqw; letter-spacing: .01em; }
.hx-volunteers    { --c1: #dcefc6; --c2: #98c874; --ink: #5c2410; }
.hex-link.hx-volunteers a .hex-name    { font-family: 'Hex volunteers', 'Comic Sans MS', cursive; font-weight: 700; font-size: 19cqw; line-height: .98; }
.hx-dialogue      { --c1: #c5e3a6; --c2: #6aa646; --ink: #35190a; }
.hex-link.hx-dialogue a .hex-name      { font-family: 'Hex dialogue', Impact, 'Arial Narrow', sans-serif; white-space: nowrap; font-size: 14.4cqw; line-height: 1; width: auto; letter-spacing: .01em; }
.hx-incommunicado { --c1: #cfe1ec; --c2: #84acc0; --ink: #43203f; }
.hex-link.hx-incommunicado a .hex-name { font-family: 'Hex incommunicado', Impact, 'Arial Narrow', sans-serif; white-space: nowrap; font-weight: 800; font-size: 12.6cqw; line-height: 1; width: auto; letter-spacing: .02em; }
.hx-eucomunic     { --c1: #eaf2bd; --c2: #adc95c; --ink: #772a0b; }
.hex-link.hx-eucomunic a .hex-name     { font-family: 'Hex eucomunic', Georgia, serif; font-size: 16cqw; line-height: 1; }
.hx-proactiv      { --c1: #58953a; --c2: #2b6226; --ink: #fff3d2; --ink-shadow: 0 1px 3px rgba(0, 0, 0, .45); --dot: rgba(255, 243, 210, .75); }
.hex-link.hx-proactiv a .hex-name      { font-family: 'Hex proactiv', cursive; font-size: 21cqw; width: 84%; }
.hx-photovoice    { --c1: #ebf4d8; --c2: #b9d98f; --ink: #a8401a; --dot: rgba(60, 110, 40, .35); }
.hex-link.hx-photovoice a .hex-name    { font-family: 'Hex photovoice', cursive; font-size: 20cqw; line-height: 1.1; }
.hx-lifepath      { --c1: #f2f1d3; --c2: #cfdca2; --ink: #7d3510; --dot: rgba(60, 110, 40, .35); }
.hex-link.hx-lifepath a .hex-name      { font-family: 'Hex lifepath', cursive; font-size: 19cqw; width: 84%; }
.hx-equilitri     { --c1: #d6e9c8; --c2: #8dbd78; --ink: #7a2a0e; }
.hex-link.hx-equilitri a .hex-name     { font-family: 'Hex equilitri', Georgia, serif; font-size: 15.5cqw; width: 84%; }
.hx-outreach      { --c1: #c3e5d0; --c2: #6db58a; --ink: #1d3b29; }
.hex-link.hx-outreach a .hex-name      { font-family: 'Hex outreach', 'Marker Felt', cursive; font-size: 16cqw; width: 84%; }
.hx-respeecht     { --c1: #d3dcf0; --c2: #8ea5d6; --ink: #1d2c5a; }
.hex-link.hx-respeecht a .hex-name     { font-family: 'Hex respeecht', 'Comic Sans MS', cursive; font-size: 15.5cqw; width: 84%; }
.hx-onward        { --c1: #f7e6b8; --c2: #e2b556; --ink: #55270a; --dot: rgba(255, 255, 255, .7); }
.hex-link.hx-onward a .hex-name        { font-family: 'Hex onward', 'Comic Sans MS', cursive; font-size: 23cqw; }

/* photo hexagons rebuilt from the original photos: outline and corner hexagon are drawn here instead of being baked into the image */
.hex-photo { --dot: rgba(150, 206, 78, .96); }
.hex-photo span:has(> img[src*="/hex/p"]) { padding: 1.15%; background: #6e9c3c; }
.hex-photo img[src*="/hex/p"] { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }