:root {
    /* Disobey 2027 palette — midpoint of bio-lume neon and the Phase Shift key art */
    --color-accent: #6EF77B; /* Spring green */
    --color-cobalt: #07265F; /* Circuit cobalt */
    --color-ghost: #F8F8FF; /* Ghost White */

    /* Derived tones */
    --color-accent-soft: #A9FAB1; /* Lighter spring green, hover states */
    --color-cobalt-bright: #0F43A3; /* Bright trace, highlighted surfaces */
    --color-cobalt-deep: #011126; /* Near-black ground, text on accent surfaces */
}

/*-------------------------
 Skip Link (Accessibility)
 -----------------------*/
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    color: var(--color-cobalt-deep);
    padding: 12px 24px;
    z-index: 10000;
    font-weight: 700;
    border-radius: 0 0 4px 4px;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline-offset: 2px;
}

body{
	font-family: "proxima-nova";
	background-color: var(--color-cobalt-deep);
	color: var(--color-ghost);
	padding: 0px 0px 0px 0px;
	background-image:url( ../img/header_background.webp?v=5 );
	background-position: center top;
	 background-size:cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-family		: "proxima-nova","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
	font-weight: 800;
	text-transform:uppercase;
	color:var(--color-ghost);
	width: 100%;
}
h1{
	margin-bottom:45px;
	color: var(--color-accent);
	font-size: 45px;
	line-height: 1;
}

h1, h4{
	transition-duration: 1.1s;
	transition-property: all;
	transition-timing-function: ease-in-out;
}

@media only screen and (max-width: 640px) {
	h1{
		line-height: 1;
	}
}

h4{
	font-size:30px;
	line-height: 1.1;
	margin-bottom: 20px;
    color: var(--color-accent);
}
h4.larger{
	font-size:35px;
	line-height: 1.1;
	margin-bottom: 20px;
}
h4, h5{
	letter-spacing: 0.7px;
}

p{
	font-size: 17px;
	letter-spacing: 0.5px;
	display:block;
	width:100%;
}

p.narrower{
	max-width: 85%;
    margin-right: auto;
    margin-left: auto;
}

@media only screen and (max-width: 640px) {
	h1{
		font-size: 36px;
	}
	h4{
		font-size:25px;
	}
}

p:last-of-type{
	margin-bottom:0px;
}

a, a:active,a:visited{

	color: var(--color-accent);
	border-bottom: 1px solid transparent;
	font-weight: 700;

	transition-duration: 1.1s;
	transition-property: all;
	transition-timing-function: ease-in-out;
}
a:hover{
		color: var(--color-accent-soft);
		border-bottom: 1px solid var(--color-accent-soft);
}

#contact a, #contact a:active, #contact a:visited{
	border-bottom: 0px;
}

a.image-link:hover{
	text-decoration: none;
}

a.get-ticket{
	color:white;
}


/*-------------------------
 ROWS
 -----------------------*/
.full-row{
	padding: 0px 50px 110px 50px;
  	padding-bottom: 110px;
  	background-size: cover;
	background-color: rgba(0,0,0,0.80);
	background-position: center center;
}
.full-row.center-bg{
  background-position: center;
}
.full-row.extra-padding{
  padding: 30px 50px 130px 50px;
}
.full-row.translucent{
  background-color: rgba(0,0,0,0.8);
}

.full-row:not( .header-row ){
	background-color: rgba(0,0,0,0.65);
	backdrop-filter: blur(20px);
}

/* Feathered panel edges: darkness+blur fade in/out instead of hard-cutting at row bounds.
   Direct children only, so intro-contact-wrap rows (which own their fade) stay untouched. */
#main-content > .full-row:not(.header-row):not(.top-bar):not(.divider):not(.transparent-bg){
	--fade-1: min(25px, 12%);
	--fade-2: min(48px, 23%);
	--fade-3: min(70px, 33%);
	--edge-fade: linear-gradient(to bottom,
		transparent 0,
		rgba(0, 0, 0, 0.4) var(--fade-1),
		rgba(0, 0, 0, 0.8) var(--fade-2),
		black var(--fade-3),
		black calc(100% - var(--fade-3)),
		rgba(0, 0, 0, 0.8) calc(100% - var(--fade-2)),
		rgba(0, 0, 0, 0.4) calc(100% - var(--fade-1)),
		transparent 100%);
	-webkit-mask-image: var(--edge-fade);
	mask-image: var(--edge-fade);
}

@media only screen and (max-width: 640px) {

	.full-row:not( .header-row ){
		background-color: rgba(0,0,0,0.5);
	}

	.full-row, .full-row.info{
		padding-top: 10px !important;
		padding-bottom: 100px;
		padding-right: 15px;
		padding-left: 15px;
		background-color: rgba(0,0,0,0.50);
	}
	.full-row.top-bar{
		padding-top:0px !important;
	}
	.full-row.tag-line {
    padding-top: 30px !important;
	}
}

.full-row.top-bar{
	background-color:black;
	padding-top:0px !important;
	padding-bottom: 0px;
}
.full-row.transparent-bg{
	background-color: rgba(0,0,0,0);
	backdrop-filter: none;
}

.full-row.tag-line{
  /* was 30, changed to 50 because of "Get your ticket" banner getting too close" */
	padding-top:50px;
	padding-bottom:30px;
}
.full-row.tag-line .grid-container{ margin-top: 0px; }
.full-row.tag-line h4{ margin-bottom: 0px; font-size: 23px; line-height: 1.3; }

.full-row.divider{
	padding:0px;
	margin:0px;
	height:20px;
	background-color: rgba(0,0,0,0.0);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.column-narrow{
	width:80%;
}

/*-------------------------
 Frontpage CFP call-to-action
 -----------------------*/
.cfp-cta-row{
	margin-top: 40px;
}

a.button.cfp-cta{
	display: inline-block;
	padding: 18px 45px;
	font-size: 24px;
	letter-spacing: 0.7px;
	border-bottom: 0px;
	color: var(--color-cobalt-deep);
	box-shadow: 0 0 35px rgba(110, 247, 123, 0.45);
	animation: cfp-pulse 2.4s ease-in-out infinite;
}

a.button.cfp-cta:hover, a.button.cfp-cta:focus, a.button.cfp-cta:active, a.button.cfp-cta:visited{
	color: var(--color-cobalt-deep);
	border-bottom: 0px;
}

@keyframes cfp-pulse{
	0%, 100% { box-shadow: 0 0 25px rgba(110, 247, 123, 0.35); }
	50% { box-shadow: 0 0 55px rgba(110, 247, 123, 0.7); }
}

@media (prefers-reduced-motion: reduce) {
	a.button.cfp-cta{
		animation: none;
	}
}

@media only screen and (max-width: 640px) {
	.cfp-cta-row{
		margin-top: 15px;
	}
	a.button.cfp-cta{
		font-size: 19px;
		padding: 15px 30px;
	}
}

/*-------------------------
 Frontpage intro / theme block
 -----------------------*/
.full-row.intro-row{
	padding-bottom: 50px;
	position: relative;
}

/*-------------------------
 Frontpage intro + contact fade wrap (one visual part)
 -----------------------*/
.intro-contact-wrap{
	position: relative;
}

/* Darkness ramp: 0 at the top of the intro, real darkness by a third down, contact-level from there */
.intro-contact-wrap::before{
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.2) 10%,
		rgba(0, 0, 0, 0.38) 22%,
		rgba(0, 0, 0, 0.52) 35%,
		rgba(0, 0, 0, 0.68) 55%,
		rgba(0, 0, 0, 0.85) 100%);
}

/* Single blur surface with a feathered top edge — no stacked strips, no seams */
.intro-contact-wrap::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 15%;
	bottom: 0;
	z-index: 0;
	pointer-events: none;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 12%, black 28%);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.75) 12%, black 28%);
}

/* Rows inside paint no background of their own — the wrap owns the fade.
   z-index:1 lifts their content above both overlay pseudo-layers. */
.intro-contact-wrap .full-row{
	position: relative;
	z-index: 1;
	background-color: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.full-row.intro-row .grid-container{
	position: relative;
	z-index: 1;
}

body.frontpage #about{
	margin-top: 0px;
}

h4.welcome-line{
	margin-top: 45px;
	color: var(--color-ghost);
}

h4.welcome-line .accent{
	color: var(--color-accent);
}




/*-------------------------
 cta
 -----------------------*/
 .container .cell.cta{
   margin-bottom: 0px;
	 margin-top: 6vh;
 }
.cta svg{
	margin-left:10px;
}

/*-------------------------
 Program items
 -----------------------*/
@media only screen and (max-width: 640px) {
	 .event-items .cell{
		 margin-top:20px;
	 }
}

#program-intro{ /* On program page */
    margin-bottom: 80px;
	margin: 0px auto 80px auto;
	max-width: 900px;
}

/*-------------------------
 Illustrations
 -----------------------*/

.illustrations{
	margin-top: 30px;

}

.illustration{
	 width:70%;
	 display: block;
	 margin: 0px auto 0px auto;
	 border-radius: 50%;
	 overflow: hidden;
	 background-position: center center;
	 background-size: cover;
	 box-shadow: 0px 0px 100px var(--color-cobalt);
	 border: 5px solid var(--color-accent);

	 transition-duration: 1.1s;
	transition-property: all;
	transition-timing-function: ease-in-out;
 }
 .on-red .illustration.red{
	border: 5px solid red;

	transition-duration: 1.1s;
	transition-property: all;
	transition-timing-function: ease-in-out;
 }

 @media only screen and (max-width: 900px) {
	 .illustration{ width:85%; max-width: 300px; }
 }

/*-------------------------
 Keynote speaker 2021
 -----------------------*/
 #keynotes{
	 padding-bottom: 30px;
 }
 #keynote-speaker{
	 display: flex;
	 padding-left: 10%;
	 padding-right: 10%;
	 align-items: center;
 }

 #keynote-speaker .illustration-keynote{
	 margin-right: 60px;
	 margin-bottom: 30px;
 }

 #keynote-speaker .keynote-illustration-container .illustration-keynote{
		width: 17vw;
		height: 17vw;
	}

	#keynotes h4{ font-size: 32px; margin-bottom: 35px; margin-top: 35px;}
	#keynotes label{ color: white; text-align:center; font-size: 18px; margin-top: -20px; margin-bottom: 40px; font-weight: 700;}
	#keynotes p{ padding: 0px 0px 0px 0px;}
	/*-------------------------
	 < 1360px wide
	 -----------------------*/
@media only screen and (max-width: 1350px) {
	#keynote-speaker{
    align-items: flex-start;
	}
	#keynote-speaker .keynote-illustration-container .illustration-keynote{
		 width: 20vw;
		 height: 20vw;
	 }
}
/*-------------------------
	< 900px wide
 -----------------------*/
@media only screen and (max-width: 900px) {
	#keynote-speaker{
    align-items: center;
		justify-content: center;
		flex-direction: column;
	}
	#keynote-speaker .keynote-illustration-container .illustration-keynote{
		 width: 40vw;
		 height: 40vw;
		 margin-bottom: 40px;
		 margin-right: 0px;
	 }
	 .keynote-text-container, #keynotes h4{
		 text-align: center;
	 }
}
/*-------------------------
	< 640px wide
 -----------------------*/
@media only screen and (max-width: 640px) {

	.illustrations{
		margin-top:0px;
	}
	.illustration{
		margin-top:55px;
	}
	.illustration.first{
		margin-top:10px;
	}

	#keynote-speakers-header{ margin-bottom: 0px;}
	#keynotes{
		padding-bottom: 0px;
	}
	#keynote-speaker{
 	 display: flex;
 	 padding-left: 7%;
 	 padding-right: 7%;
 }
	#keynote-speaker .keynote-illustration-container .illustration-keynote{
		 width: 75vw;
		 height: 75vw;
		 margin-top:25px;
	}
 }

/*-------------------------
 some
 -----------------------*/
.cell .some {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}

.cell .some a:hover {
    border-bottom: 1px solid rgba(0, 0, 0, 0);
}

.some svg, .some img {
    color: white;
    font-size: 40px;
    margin: 20px 40px 20px 40px;
}

#contact a img{
	display: inline-block;
	height: 40px;
 }

.contact-row{
	margin-top:20px;
}



#powered-by{
	margin-top: 50px;
	margin-bottom: 80px;
}

.button{
	background-color: var(--color-accent);
    padding: 20px 70px 20px 90px;
    font-size: 27px;
    font-weight: 800;
    cursor: pointer;
    color: var(--color-cobalt-deep);
    border-radius: 2px;
}


.button:hover, .button:focus{
		background-color: var(--color-accent-soft);
		transition: none;
}
.button:focus-visible{
		outline: 2px solid white;
		outline-offset: 3px;
}

.button svg{
		font-size:24px;
		margin-left:10px;
		transform: translateY( 2px);
}

.get-ticket{
	position: absolute;
	z-index: 100;
	bottom: 0px;
	left: 50%;
	transform: translate( -50%, 50% );
	margin:0px;
}

/*-------------------------
 Tickets-page
 -----------------------*/

/*-------------------------
Buy button
-----------------------*/

 .buy-ticket-button{
	display: inline-block;
	border:0px;
	margin: 0px;
	margin-top: 40px;
	padding: 15px 20px 15px 20px;
	background-color: var(--color-accent);
	color: var(--color-cobalt-deep);
	text-align: center;
    font-size: 23px;
	font-weight: 600;
    border-radius: 5px;
    width: 80%;
	max-width: 300px;
 }
@media screen and ( max-width: 640px ) {
	.buy-ticket-button{
		font-size: 20px;
		margin-bottom: 60px;

	}
}


.buy-ticket-button:hover, .buy-ticket-button:visited, .buy-ticket-button:active{
    color: var(--color-cobalt-deep);
    border-bottom: 0px;
}
.buy-ticket-button:focus-visible{
    outline: 2px solid white;
    outline-offset: 3px;
}

.buy-ticket-button.inactive{
    background-color: var(--color-cobalt);
    color: var(--color-ghost);
    opacity: 0.9;
    text-decoration: line-through;
}


/*mobile buy tickets cta */
#buy-tickets-cta-mobile-only{
	padding: 20px !important;

}

#buy-tickets-cta-mobile-only a{
	border: 0px;
	line-height: 1;
	font-size: 25px;
	display: flex;
    justify-content: center;
    align-items: center;
}

#buy-tickets-cta-mobile-only a .arrow{
	border-color : var(--color-accent);
	margin-left: 5px;
}

.on-red #buy-tickets-cta-mobile-only a .arrow{
	border-color : red;
}

/* Tickets page table */
 .flex-column{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
 }

/*-------------------------
 Speakers
 -----------------------*/
 .speaker-link{
	 display: block;
	 height: 90%;
 }
 .speaker-link:hover{
	 border-bottom: 1px solid transparent;
 }
 .speaker-link:focus-visible{
	 outline: 2px solid var(--color-accent);
	 outline-offset: 2px;
 }

 .speaker-container .speaker-link:hover .speaker-name{
	 color: var(--color-accent-soft);
 }

.speaker-image{
	 width:100%;
	 height:auto;
	 margin-bottom:15px;
	 border-radius: 50%;
	 background-size: cover;
	 background-position: center center;
	 background-repeat: no-repeat;
}


.speaker-container .speaker-image{
	border: none;
	box-sizing: border-box;
	transition-duration: 1.1s;
	transition-property: all;
	transition-timing-function: ease-in-out;
}

.on-red .speaker-container .speaker-image.red{
	border: 3px solid red;
	transition-duration: 1.1s;
	transition-property: all;
	transition-timing-function: ease-in-out;
}

.speaker-container .speaker-name{
	color: white;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: black;
    padding: 9px 5px 7px 5px;
    line-height: 1.2;
    text-transform: uppercase;
    margin-bottom: 0;
}
#speakers-with-img-container .speaker-name{
	margin-bottom:50px;
}
#speakers-no-img-container{
	padding-top:10px;
	padding-bottom: 30px;
}
#speakers-no-img-container .speaker-name{
		margin:0px 0px 8px 0px;
}

@media print, screen and (max-width: 640px){
	#speakers-no-img-container .speaker-name{
			margin:30px 0px 20px 0px;
	}
}

@media print, screen and (min-width: 64em){
	.speaker-container.grid-margin-x > .large-2 {
	    width: calc(14% - 1.875rem);
	}
}

@media print, screen and (min-width: 1211px) {
    .hide-for-large.custom {
        display: none !important;
    }
}

@media screen and (max-width: 1210px) {
    .show-for-large.custom {
        display: none !important;
    }
}

/*-------------------------
 Program
 -----------------------*/
#program-highlights h4{
	font-size:28px;
}

#program-highlights h5{
	font-size:14px;
	background-color: rgba(0,0,0,0.7);
	padding: 5px 10px 5px 10px;
	display: inline-block;
	margin:0px 0px 20px 0px;
}

#program-highlights p{
	font-size:15px;
	text-align: left;
}
.open-button{
	cursor: pointer;
	font-size: 13px;
	background-color: rgba(0,0,0,0.3);
	padding: 5px 10px 5px 10px;
	display: inline-block;
}
.program-content{
	display:none;
}

.annoucements{
	padding:20px;
	margin-bottom:15px;
	background-color: rgba(0,0,0,0.4);
	letter-spacing: 0.6px;
}

.annoucements.last{
	margin-bottom:50px;
}

.annoucements svg{
	margin-right:10px;

}

@media print, screen and (max-width: 640px){
	#program-highlights h4{
		font-size:26px;
	}
	#program-highlights h5{
		Margin-top:20px;
	}
	.open-button{
		margin-bottom:30px;
	}
	.program-content{
		margin-bottom:30px;
	}
}

.pointer, .pointer label{
	cursor: pointer;
}
.hidden{
	visibility:hidden;
}
.inline-block{
	display: inline-block;
}
.ligh-blue{
	color:white;
}
strong{
	text-transform: uppercase;
}

.regular-font-size, ul.regular-font-size li, ul.sideline.regular-font-size li{
	font-size: 17px;
}
.margin-auto-centered{
	margin-right: auto;
	margin-left: auto;
}

/*-------------------------
 sideline
 -----------------------*/
div.sideline{
	border-left: 2px solid var(--color-cobalt-bright);
	padding-left: 35px !important;
}

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}


/* Logo-only glitch frames (toggled by runGlitchSequence in main.js) */
img.logo-glitch_1{
	transform: translate( -6px, 4px );
	mix-blend-mode: hard-light;
	filter: blur( 1px );
}

img.logo-glitch_2{
	transform: translate( 5px, -7px );
	filter: blur( 1px );
}
img.logo-glitch_3{
	transform: translate( -8px, 3px );
	mix-blend-mode: overlay;
	filter: blur( 1px );
}

/*-------------------------
 CSS Arrows
 -----------------------*/
.arrow {
	border: solid black;
	border-width: 0 3px 3px 0;
	display: inline-block;
	padding: 3px;
  }

  .right {
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
  }

  .left {
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
  }

  .up {
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
  }

  .down {
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
  }

  .inline-arrow.right{
	  display: inline-block;
	  border: solid var(--color-accent);
	  border-width: 0 3px 3px 0;

  }


  #privacy-policy{
	  text-align: left;
	  max-width: 700px;
	  margin: 0 auto 0 auto;
  }

  #privacy-policy h5{
	margin-top: 50px;
  }

  #hackerpuzzle-notice{
	  max-width: 700px;
	  margin: 0 auto;
	  text-align: left;
	  background: rgba(1, 17, 38, 0.45);
	  border-left: 4px solid var(--color-accent);
	  padding: 30px 35px;
  }

  #hackerpuzzle-notice code{
	  font-family: monospace;
	  font-size: 16px;
	  color: var(--color-accent);
	  background: none;
	  border: none;
	  padding: 0px;
  }

  #hackerpuzzle-notice .signature{
	  text-align: right;
	  margin-bottom: 0px;
  }

  @media only screen and (max-width: 640px){
	  #hackerpuzzle-notice{
		  padding: 20px;
	  }
  }

  #competitions h4{
	  margin-top: 50px;
  }

#accent-left{
  position: absolute;
  bottom: 15%;
  left: 0px;
  z-index: -1;
  opacity: 0.5;
}

#accent-right{
    position: absolute;
    top: 5%;
    right: 0px;
    z-index: -1;
    opacity: 0.5;
}

#accent-right-2{
	position: absolute;
	bottom: 5%;
	right: -150px;
	z-index: -1;
	opacity: 0.7;
	transform: rotate( 180deg );
}

@media screen and (max-width: 640px){
	#accent-left{
		bottom: 5%;
		opacity: 0.7;
		left: -50px;
	}

	#accent-right-2{
		display: none;
	}

	#accent-right{
		top:8%;
		transform: scale( 0.95 );
		right: -20px;
		opacity: 0.7;
	}

}

#venue-map{
	border:2px solid var(--color-accent);
	display:block;
	padding:0px;
}
#venue-map-open{
	padding:20px 20px 15px 20px;
}