@layer components {

	.part { padding-block: clamp(2rem, 1vw, 3rem);}
	.part {
		padding-inline: 10%;
	}
	.part > h2, .part > h3, .part > h4 { text-align:center; margin-bottom: var(--space-4) }
	.part:not(.media-object) .details { max-width: 68ch; margin-inline:auto; padding-inline: 10% }
	

	
	#at-a-glance ul {
		display: flex;
		flex-wrap: nowrap;
		column-gap: 1%;
		text-align: center;
		padding: 0;
	}
	
	#at-a-glance ul li {
		flex: 0 0 32%;
		list-style-type: none;
	}
	
	#code-of-conduct a:link, #code-of-conduct a:visited {
		--link-color: #fff;
		color: var(--link-color);
		text-decoration: underline;
	}
	
	@media all and (max-width: 720px) {
		#at-a-glance {
			padding-inline: 0;
		}
	}
	
}

/* --- promoted from conference theme to shared components --- */
/* Sub-site bindings of roles to specific components */
@layer components {

	:root {
		--v-block-margin-normal: 2rem;
	}
	


	.part.media-object {
		padding-block: clamp(5rem, 6vw, 4rem);
	}

	#events > p{
		width: 60%;
		margin-inline: auto;
		text-align: center;
	}

	#signup > p{
		width: 60%;
		margin-inline: auto;
		text-align: center;
	}
	
	#signup form.form-container {
		width: 60%;
		margin-inline: auto;
	}
	
	#register {
		padding-inline: 5% 
	}
	
	#register > p {
		width: 60%;
		margin-inline: auto;
		text-align: center;
	}
	
	.pricing ul {
		font-size: var(--font-size-small);
	}
	
	.pricing .tiers-line {
		font-size: var(--font-size-x-small);
	}
	
	.inclusions {
		margin-block-start: var(--v-block-margin-normal);
		font-size: var(--font-size-small);
		width: 50%;
		line-height: 1.1;
	}
	
	.inclusions > * {
		margin-block: .4em;
	}
	
	#about-aiweek > img {
		width: 50%;
		margin-inline: auto;
		padding-block-end: 1rem
	}
	
	#about-aiweek .details h3 {
		text-align: center;
	}
	
	#about-aiweek .details {
		padding-inline: 0;
	}
	
	#about-aiweek .details p:last-child {
		text-align: right;
	}
	
	#tracks > p {
		width: 60%;
		margin-inline: auto;
	}
	
	#tracks .content-group > section {
		font-size: smaller;
	}
	
	#partners {
		text-align: center;
	}
  
	  #partners > section {
	  	width: 60%;
	  	margin-inline: auto;
	  }
	  
     #about {
     	padding: 0;
     }
	  
	 #about > .media-object {padding-block: 4rem;
	     padding-inline: 2rem;}
	  
	  
	#about > .media-object img {
		width: 30%;
	}
	
	#johnallsopp.media-object img {
		width: 20%;
	}
	
	#about > #johnallsopp.media-object .details {
		width: 75%;
	}
	
		#about > .media-object .details {
		width: 65%;
		padding-inline: 0;
	}
	
		#speakers h3 {
		margin-block: 1em;
		text-align: center;
	}
	
	#code-of-conduct {
		background-color: var(--color-accent-3);
		color: var(--color-on-accent);
		text-align: center;
	}
	
	
/* narrow */

	@media all and (max-width: 720px) {
	
		nav.page li {
			display: none;
		}
		
		nav.page li:is(:first-child, :nth-child(3), :last-child) {
			display: inline-block
		}
		
	
	
		#page-header p:last-child {
			width: 100%
		}
		
		.media-object img {
			display: none
		}
		
		.media-object .details {
			width: 90%;
			margin-inline: auto;
		}
		
		#tracks > p {
			width: 90%;
		}
		
		#events > p {
			width: 90%;
			margin-inline: auto;
		}
		
		#signup > p {
			width: 90%;
			margin-inline: auto;
		}
		
		#signup form.form-container {
			width: 100%
		}
		
		#register > p {
			width: 90%;
			margin-inline: auto;
		}
		
		#partners > section {
			width: 90%;
		}
		
	
	}	

}

/* Empty-state placeholders for not-yet-announced editions (speakers grid,
   schedule, partners, jobs). Harmless to editions that never hit them. */
.speakers-empty,
.schedule-empty {
	padding-block: clamp(2.5rem, 6vw, 5rem);
	padding-inline: 10%;
}
.speakers-empty,
.schedule-empty,
.partners-empty,
.jobs-empty {
	text-align: center;
	text-wrap: balance;
}
.speakers-empty :is(h2, h3),
.schedule-empty :is(h2, h3),
.partners-empty :is(h2, h3),
.jobs-empty :is(h2, h3) {
	margin-block-end: 0.4rem;
}
/* Mute only the placeholder message, not the heading, so empty-state section
   titles match the other section headings. */
.speakers-empty p,
.schedule-empty p,
.partners-empty p,
.jobs-empty p {
	color: color-mix(in srgb, currentColor 65%, transparent);
}