/* ========== Fonts ========== */
@font-face{
	font-family:'Pirelli';
	src:url('JLPirelli-Medium.woff') format('woff'),
	url('JLPirelli-Medium.woff2') format('woff2');
	font-weight:normal;font-style:normal;font-display:swap;
}
@font-face{
	font-family:'Pretendard';
	font-weight:500;font-display:swap;
	src:local('Pretendard Medium'),
	url(Pretendard-Medium.woff2) format('woff2'),
	url(Pretendard-Medium.woff) format('woff');
}
.en-text{font-family:'Pirelli','Pretendard',-apple-system,BlinkMacSystemFont,helvetica,arial,sans-serif!important;}
.kr-text{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,helvetica,arial,sans-serif!important;}

/* ========== Reset ========== */
*{margin:0;padding:0;box-sizing:border-box;}

/* ========== Design Tokens (edit these) ========== */
:root{
	/* type scale */
	--step-xs:14px; --lh-xs:20px;
	--step-sm:16px; --lh-sm:20px;
	--step-base:22px; --lh-base:30px;
	--step-lg:22px; --lh-lg:30px;

	/* layout */
	--gutter:50px;
	--section-pad:100px var(--gutter);

	/* grids / columns (set per breakpoint) */
	--banner-cols:3;     /* #banner-content columns */
	--speaker-cols:4;    /* .speaker-grid columns */
	--bio-cols:4;        /* .row.bios columns */

	/* colors */
	--c-bg-left:#fff; --c-bg-right:#333; --c-text-right:#fff;
	--c-accent:#00b0dc; --c-orange:#ff4a00;
}

html {
  scroll-behavior: smooth;	
}

/* ========== Base ========== */
body{
	font-family:'Pirelli','Pretendard',-apple-system,BlinkMacSystemFont,helvetica,arial,sans-serif;
	background:linear-gradient(to right, var(--c-orange) 50%, #000 50%);
	min-height:100vh;min-width:100vw;color:#000;
}

/* shared small/base text */
#content header, #content header ul, #content table td.time, .small, #content p.small,#banner h1,#content #banner-content ul,#banner-content li{font-weight: normal; font-size:var(--step-sm);line-height:var(--lh-sm);}
#title-top h1,#title-top h2,#content{font-weight: normal; font-size:var(--step-base);line-height:var(--lh-base);}
#content{padding-top:100vh; font-weight: normal; font-size:var(--step-base);line-height:var(--lh-base);}
.meta{font-weight: normal; font-size:var(--step-xs);line-height:var(--lh-xs);}


/* ========== Top Title / Logos ========== */
#title-top,#logos{
	position:absolute;width:100vw;text-align:center;display:flex;flex-direction:row;align-content:center;justify-content:center;
}
#title-top{top:20px;color:var(--c-accent);}
.right,.left{width:50vw}
.right{padding-left:8px;text-align:left}
.left{padding-right:5px;text-align:right}

#logos{bottom:20px;color:#399cb3}
#logos img{height:70px;width:auto}
#logos .left{padding-right:10px}
#logos .right{padding-left:10px}

/* BG elements */
#en-bg,#kr-bg{
	width:50vw;height:50vw;position:absolute;left:0;top:50vh;transform:translateY(-50%);z-index:0;background:transparent;
}
#kr-bg{left:50vw}
#en-bg-still,#kr-bg-still{display:none}


/* ========== nav ========== */

#content header {
	padding: 20px 20px 14px;
	background: black;
	color: #b5b6b9;
	border-bottom: 1px solid #b5b6b9;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;

	position: sticky;
	width: 100%;
	top: 0vh;
	left: 0px;

	z-index: 1000;

	text-transform: uppercase;
	box-sizing: border-box;
}

#content nav {
	width: 100%;
}

#content nav a, #content nav ul li {
	display: inline-block;
	
}

#content nav ul {
	display: inline-block;
}

#content nav a {
	color: #b5b6b9;
	text-decoration: none;
	margin-right: 15px;
}

#content nav a.float-right {
	float: right;
}

#content nav a.ig-link {
	margin: 0px;
	width: 20px;
	height: auto;
}

#content nav a.ig-link img {
	width: 100%;
	height: auto;
	opacity: .7;
}

#content .mobile-link {
	display: none;
}

#content nav a#logo {
	color: var(--c-orange);
	position: relative;
	z-index: 10000;
}


/* ========== Content Sections ========== */
.row{display:flex;flex-direction:row}
#content .left,#content .right{
	text-align:left;padding:var(--section-pad);background:var(--c-bg-left);
}
#content .right{background:var(--c-bg-right);color:var(--c-text-right)}
#content h2,#content p,#content ul{font-size:var(--step-base);line-height:var(--lh-base);margin-bottom:30px}
#content ul{padding-left:30px; column-count: 2;}
#content .location ul{padding-left:30px; column-count: 1;}
#content a{text-decoration:underline;color:black}
#content .right a{color:white}
#content a:hover{text-decoration:none}
#content a::after{content:' ↗'}
#content header a::after{content:''}
#content .row.schedule .left{background:black;color:white}
#content .row.schedule .right{background:var(--c-orange)}

/* label/info pairs */
.label,.info{border-top:1px solid #000;float:left;padding:5px 2px 20px;}
.right .label,.right .info{border-top:1px solid #ddd;}
.label{width:20%;clear:both}
.info{width:80%}
.note{padding:20px 0px 40px;clear:both}

#content li.top-padding {
	padding-top: 10px;
}

#content header ul {
	margin: 0px;
	padding: 0px;
}


/* ========== Banner (variable columns) ========== */
#banner{width:100%;background:#ddd;color:#111}
#banner-content{
	display:grid;grid-template-columns:repeat(var(--banner-cols),1fr);
	width:100%;max-width:1600px;margin:0 auto;padding:40px 20px;gap:20px;
}
#banner-content span{display:block}
#banner-content h1,#content #banner-content ul,#banner-content li{margin:0;padding:0;list-style:none}
#banner-content h1{margin-bottom:12px}
.place{width:12px;vertical-align:middle;margin-right:4px}

/* ========== Tables ========== */
table{width:100%;border-collapse:collapse;margin-bottom:30px}
table tr td{padding:12px 4px}
td.date{width:15%}
td.speaker{width:85%}

/* ========== Speakers Grid (variable columns) ========== */
.row.speakers{background:#CCC;color:black}
.speaker-grid{
	display:grid;grid-template-columns:repeat(var(--speaker-cols),1fr);
	gap:50px;padding:var(--section-pad);margin:auto;
}
.speaker img{width:100%}

/* ========== Talks ========== */
.row.talks{background:linear-gradient(to right,#222 50vw,#000 50vw)}
.talk{
	width:100%;padding:var(--section-pad);clear:both;overflow:auto;color:white;
}
.talks .day-seperator{background:white;padding:200px var(--gutter)}
.talk .time{
	width:100%;font-weight:bold;margin-bottom:80px;text-align:center;color:var(--c-accent);
}
/* 50/50 split for en/kr */
.talk .speaker,.talk .talk-info{width:50%;float:left}
.speaker.en,.talk-info.en{padding-right:50px}
.speaker.kr,.talk-info.kr{padding-left:50px}
.talk-info h3{font-size:var(--step-lg);line-height:var(--lh-lg);margin-bottom:40px}
#content .talk-info a{color:rgba(255,255,255,.5)}

/* ========== Bios Grid (variable columns) ========== */
.row.bios{
	display:grid;grid-template-columns:repeat(var(--bio-cols),1fr);
	gap:50px;padding:100px var(--gutter) 50px;margin:auto;background:#888;
}
#content .row .full-speaker-bio p{font-size:var(--step-sm);line-height:var(--lh-sm); margin-bottom: var(--lh-sm);}
.more-button{font-size: var(--step-sm);display:inline-block;padding:2px 8px;border-radius:4px;background:rgba(0,0,0,.4);color:#ccc; cursor: pointer;}
.more-button:hover {background: var(--c-accent); cursor: pointer;}
.more{display:none}.more.show{display:block}

/* ========== Mobile-Only Elements ========== */
#mobile-title-top{padding:20px;width:100vw;text-align:center;display:none}
#mobile-title-top h1,#mobile-title-top h2{
	font-size:18px;line-height:22px;position:relative;z-index:100;color:#399cb3;width:100%;text-align:center;
}
#mobile-logos{
	position:absolute;bottom:20px;width:100vw;text-align:center;
	display:none;flex-direction:row;align-content:center;justify-content:center;
}
#mobile-logos img{width:200px;height:auto;max-width:100vw}

footer{
	padding:20px;background:black;color:white;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;
}

/* workshop */

#workshop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	background: var(--c-accent);
	padding: 8px 10px;
	width: auto;
	text-decoration: none;
	color: white;
	font-size:var(--step-sm);
	line-height:var(--lh-sm);
	border-radius: 3px;
}

#workshop::after {
	padding-left: 5px;
	content: ' ↗';	
}

#workshop:hover {
	background: var(--c-orange);
}

img#sponsor-logos {
	width: auto;
	max-width: calc(100vw - 40px);
}

/* ========== Breakpoints (edit only variables below) ========== */

/* <= 1000px : slightly smaller type */
@media (max-width:1000px){
	:root{
		--bio-cols:2;
		--gutter:20px;
		--section-pad:30px var(--gutter);
		--step-sm:15px; --lh-sm:20px;
		--step-base:18px; --lh-base:28px;
		--step-lg:18px; --lh-lg:28px;
	}
	#content h2,#content p,#content ul{margin-bottom:24px}
	#content ul{padding-left:24px}
}

/* <= 800px : mobile layout + fewer columns */
@media (max-width:800px){
	:root{
		--banner-cols:1;
		--speaker-cols:2;
		--bio-cols:1;
		--gutter:20px;
		--section-pad:20px var(--gutter);
		--step-sm:13px; --lh-sm:16px;
		--step-base:16px; --lh-base:20px;
		--step-lg:16px; --lh-lg:20px;
	}

	.row {
		display: block;
	}

	body{padding-top: 50px; background:linear-gradient(to bottom, var(--c-orange) 50vh, #000 50vh)}
	#en-bg,#kr-bg{display:none}
	#en-bg-still,#kr-bg-still{
		display:block;width:100vw;max-width:100vw;height:auto;max-height:auto;
		position:relative;left:0vw;transform:translateX(0%);z-index:0;background:transparent;
	}
	#kr-bg-still{top:auto;} #en-bg-still{bottom:auto;}

	#title-top.desktop,#logos.desktop{display:none}
	#mobile-title-top{display:block; position: absolute; top: 10px;}
	#mobile-logos{display:flex}

	#content{padding-top: 0px; display:flex;flex-direction:column}
	#content .left,#content .right{width:100vw;text-align:left}

	/* talks: stack columns */
	.talk .speaker,.talk .talk-info{width:100%;float:none}
	.speaker.en,.talk-info.en,.speaker.kr,.talk-info.kr{padding-left:0;padding-right:0}
	.row.talks {background: black;}

	.meta div {
		width: 100%;
		float: none;
	}
	.meta .info {
		border: none;
	}

	/* mobile nav */

	#content header {
		padding: 20px 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	#content nav {
		width: auto;
	}

	#content nav .ig-link{
		display: none;
	}

	#content nav ul {
		padding: 0px;
		background: black;
		display: block;
		align-items: left;
		transition: all .5s ease;
		columns: 1;
	}

	#content nav ul li {
		margin: 0px;
		display: none;
	}

	#content nav ul li:first-of-type {
		display: block;
	}

	body.menu #content nav ul li, body.menu #content nav ul li.mobile-link {
		margin: 0px 0px 10px;
		display: block;
	}

	#content nav ul li:last-of-type {
		margin: 0px;	
	}

	#content nav ul li a {
		margin: 0px;
	}

	#content nav ul li.mobile-link {
		opacity: .5;
	}

	#content nav ul li.mobile-link::after {
		padding-left: 5px;
		content: ' ↗';
	}

	#content nav a.archive-link, nav a.ig-link {
		display: none;
	}

	#content #mobile-toggle {
		width: 18px;
		height: 18px;
		position: relative;
		margin: 0 0px;
		cursor: pointer;
	}

	#content #mobile-toggle:before,
	#content #mobile-toggle:after {
		content: '';
		position: absolute;
		width: 100%;
		height: 2px;
		color: white;
		background-color: #b5b6b9;
		transition: all .25s ease-in-out;
	}

	#content #mobile-toggle:before {
		top: 0;
		transform: rotate(0);
	}

	#content #mobile-toggle:after {
		bottom: 0;
		box-shadow: 0 -8px #b5b6b9;
	}

	body.menu #content #mobile-toggle:before {
		top: 8px;
		transform: rotate(45deg);
	}

	body.menu #content #mobile-toggle:after {
		box-shadow: 0 0 transparent;
		bottom: 8px;
		transform: rotate(-45deg);
	}


	#content #mobile-toggle:hover {
		opacity: .8;
	}

	#workshop {
		position: fixed;
		bottom: 20px;
		right: 20px;
		width: calc(100vw - 40px);
	}
	
}