@layer home.gen, home.type, home.sects, home.pri, home.grid;

/*
@import url(common-1784653771.css) layer(common);
*/
@import url(common.css) layer(common);

@layer home.gen {

	section {
	  padding: 2vw 4vw;
	  @container (inline-size > 900px) {
		  > div {
			  max-width: 1400px;
			  margin: 0 auto;
			  padding: 0 4vw;
		  }
		}
	}

	section.hero {
		display: grid;
	  padding: 5rem 4vw 2vw;
	  @container (inline-size > 900px) {
		  padding: 2vw 4vw;
		  min-height: 100vh;
		}
	}

	section h2 {
	  letter-spacing: 2px;
	  text-transform: uppercase;
	  color: var(--navy);
	  margin: 4em 0 .8em;
	}

	section h3 {
	  color: var(--navy);
	  margin: .5em 0 .9em;
	}

	a {
		color: var(--tealb);
	}

}

@layer home.type {

	section h2 {
	  font-family: sans-serif;
	  font-size: .9em;
	  font-weight: 600;
	}
	
	section h3 {
	  font-size: clamp(26px,3.5vw,38px);
	}
	
	.hero h1 {
	  font-family: 'Cormorant Garamond',serif;
	  font-size: clamp(1.8em, 5.8vw, 4em);
	  font-weight: 400;
	  line-height: 1;
	}
	
	.hero h2 {
	  font-size: var(--xx-small);
	  font-weight: 400;
	}

	.hhstats li em {
	  font-family: serif;
	  font-style: normal;
	  font-size: 1.9em;
	}

}

@layer home.grid {

	.gr21,
	.gr12,
	.gr2 {
	  display: grid;
	  gap: var(--gap);
	  grid-template-columns: 1fr;
	}

	.gr2 {
	  @container (inline-size > 900px) {
	  	grid-template-columns: 1fr 1fr;
		  align-items: center;
	  	place-content: center space-around;
	  }
	}

	.hero .gr2 {
	  @container (inline-size > 900px) {
			div {
				padding: 0 1em;
			}
		}
	}

	.gr12 {
	  align-content: start;
	  @container (inline-size > 900px) {
	  	grid-template-columns: 1fr 2fr;
	  }
	}

	.gr21 {
	  align-content: start;
	  @container (inline-size > 900px) {
	  	grid-template-columns: 2fr 1fr;
	  }
	}

	.about .gr2 {
	  align-items: start;
	}

	.mopad {
	  gap: 40px;
	}

	.rskstr {
	  list-style: none;
	  margin: 1.5em 0 0;
	  padding: 0;
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: var(--gap);
	  align-items: stretch;
	  @container (inline-size > 600px) {
	    grid-template-columns: 1fr 1fr;
	  }
	}

	.hbtns {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  gap: var(--gap);
	  list-style: none;
	  padding: 0;
	}

	.gr3 {
	  display: grid;
	  gap: var(--gap);
	  grid-template-columns: 1fr;
	  @container (inline-size > 900px) {
	    grid-template-columns: 1fr 1fr 1fr;
	  }
	}

	.req {
	  display: grid;
	  gap: var(--gap);;
	  margin: 3em 0 1em;
	  grid-template-columns: 1fr;
	  @container (inline-size > 900px) {
	    grid-template-columns: 1fr 1fr;
	  }
	}

	.postli {
	  list-style: none;
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: var(--gap);
	  @container (inline-size > 900px) {
	  	grid-template-columns: 1fr 1fr;
	  }
	}

	.fr {
	  display: grid;
	  grid-template-columns: 1fr;
	  gap: var(--gap);;
	}

	.regform {
	  container: reg / inline-size;
	}

	/*
	container queries
	*/

	@container reg (width > 600px) {
	  .fr {
	    grid-template-columns: 1fr 1fr;
	  }
	}

}

/*
hero section
*/

@layer home.pri {

	.hbtns li a {
	  color: rgba(255, 255, 255, .85);
	}

	.hbtns li a:hover {
	  color: #fff;
	  background: rgba(255, 255, 255, .1);
	}

	.hbtns li:first-child a {
	  color: #fff;
	  background: var(--tealb)
	}

}

@layer home.sects {

	.hero {
	  background: radial-gradient(ellipse 50% 65% at 88% 38%,rgba(0,151,167,.15) 0%,transparent 60%), radial-gradient(ellipse 38% 50% at 5% 82%,rgba(0,151,167,.08) 0%,transparent 55%), linear-gradient(155deg,#001528 0%,#002244 40%,#003562 100%);
	}

	.hero h1 {
	  color: #fff;
	  margin: .4em 0;
	}

	.hero h1 em {
	  color: var(--teal);
	  font-style: italic;
	}

	.hero h2 {
	  color: rgba(255,255,255,.8);
	  letter-spacing: 1.9px;
	  text-transform: uppercase;
	  margin-bottom: 24px;
	  margin: .5em 0;
	}

	.hero p {
	  color: rgba(255,255,255,.8);
	  line-height: 1.8;
	  margin-bottom:36px;
	}

	.hero div {
	  max-width: 1400px;
	  margin: 0 auto;
	  padding: 0 0 1em;
	}

	.hero > div {
		padding: 0;
	}

	.hbtns li:first-child a:hover {
	  background: var(--tealh)
	}

	.hbtns li a {
		display: block;
	  border: 1.5px solid var(--teald);
	}
	.hbtns li a:hover {
	  border-color: rgba(255,255,255,.8);
	}

	.hhstats {
	  list-style: none;
	  padding: 0;
	}

	.hhstats li {
	  background: rgba(255,255,255,.04);
	  border: 1px solid rgba(255,255,255,.1);
	  border-radius: var(--rl);
	  color: rgba(255, 255, 255, .7);
	  padding: .75em;
	  margin: .5em 0;
	}


	.hhstats li em {
	  display: block;
	  color: var(--teal);
	}

	/*
	about section
	*/

	.sag {
	  list-style: none;
	  padding: 0;
	}

	.sag li {
	  border-bottom: 1px solid var(--border);
	  padding: 1em 0;
	  display: flex;
	}

	.sag li:last-child {
	  border-width: 0;
	}

	.sag li em {
	  background: var(--teallt);
	  border-radius: .5em;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  flex-shrink: 0;
	  font-style: normal;
	  height: 34px;
	  width: 34px;
	  margin: 0 .5em;
	}

	.sag li strong {
	  display: block;
	  text-transform: uppercase;
	  font-size: .9em;
	}

	.sag p {
	  padding: 0;
	  margin: 0;
	  line-height: 1.4;
	  float: left;
	}

	.gr2 h3 {
	  color: var(--navy);
	}

	.rskstr li {
	  border: 1px solid;
	  border-radius: var(--rl);
	  padding: .5em 1.5em 1em;
	}

	.rskstr li:first-child {
	  border-color: #d0533a;
	  background: #fff7f5;
	}

	.rskstr li:last-child {
	  border-color: #2a7a60;
	  background: #f0faf5;
	}

	.citation {
	  background: var(--goldlt);
	  border: 1px solid #e8c97a;
	  border-radius: var(--r);
	  padding: .75em 1em;
	  margin-top: 1.5em;
	  font-size: .9em;
	  color: var(--text);
	  line-height: 1.6;
	}

	.citation strong {
	  color: var(--gold);
	}

	.covit {
	  background: var(--navy);
	  border-radius: var(--rl);
	  padding: 26px 28px;
	  color: #fff;
	  margin-top: 28px;
	}

	.covit h2 {
	  color: var(--teal);
	  margin: .5em 0 2em;
	  padding: 0 0 1em;
	}

	.covit h3 {
	  color: #fff;
	  font-size: 1.2em;
	  font-weight: 600;
	  margin-top: 0;
	}

	.covitality {
	  display: inline-block;
	  background: rgba(0,151,167,.25);
	  color: var(--teal);
	  font-size: 12px;
	  font-weight: 600;
	  padding: 3px 11px;
	  border-radius: 100px;
	  letter-spacing: .3px;
	}

	/*
	instruments section
	*/

	.reg,
	.onb,
	.instr {
	  background: var(--light);
	}

	.incta {
	  list-style: none;
	  margin: 2em 0;
	  padding: 0;
	}

	/*
	instrument cards
	*/

	.ic {
	  background:#fff;
	  border-radius:var(--rl);
	  padding:24px 22px;
	  box-shadow: var(--sh);
	  border-top: 4px solid #c0392b;
	}

	.ic.sehs {
	  border-top-color: var(--teald);
	}
	.ic.conn {
	  border-top-color: var(--sage);
	}
	.ic.coord {
		border-top-color: var(--teald);
	}

	.ic.site {
		border-top-color: var(--sage);
	}

	.ic.proctor {
		border-top-color: var(--gold);
	}

	.items {
	  font-size: .9rem;
	  font-weight: 600;
	  letter-spacing: 1px;
	  text-transform: uppercase;
	  padding: 0;
	  margin: 0;
	}

	.items strong {
	  display: block;
	  font-family: 'Lora',serif;
	  font-size:4em;
	  font-weight:600;
	  line-height:1;
	  margin-bottom:2px;
	}

	.cswi .items strong {
	  color: #c0392b;
	}

	.sehs .items strong {
	  color: var(--teald);
	}

	.conn .items strong {
	  color: var(--sage);
	}

	.items li:last-child {
	  font-size: .8em;
	  font-weight: 700;
	  letter-spacing: 1px;
	  text-transform: uppercase;
	}

	.tags {
	  display: inline-flex;
	  flex-wrap: wrap;
	  gap: .5em;
	  list-style: none;
	  padding: 0;
	  margin: 1em 0 0;
	}

	.tags li {
	  background: #eee;
	  border-radius: 2em;
	  font-size: .8em;
	  font-weight: 500;
	  padding: .25em 1em;
	  white-space: nowrap;
	}

	.ic.cswi .tags li {
	  background: #fdecea;
	  color: #b8391f;
	}

	.ic.sehs .tags li {
	  background: var(--teallt);
	  color: #005f68;
	}

	.ic.conn .tags li {
	  background: var(--sagelt);
	  color: #2a5c47;
	}

	footer.covit {
	  display: flex;
	  align-items: flex-start;
	}

	.lnum {
	  font-family: 'Lora',serif;
	  font-size: 50px;
	  font-weight: 700;
	  color: var(--teal);
	  line-height: 1;
	  flex-shrink: 0;
	  margin: 0;
	}

	.tier {
	  margin-left: 2em;
	}

	.tier h4 {
	  margin: 0;
	  padding: 0 0 .5em;
	}

	.tier p {
	  font-size: .9em;
	  color: rgba(255,255,255,.9);
	  line-height: 1.6;
	  margin: 0;
	  padding: 0;
	}

	/*
	district requirements
	*/

	.req, .req ul {
	  list-style: none;
	  padding: 0;
	}

	.req ul {
		margin-top: 1em;
	}

	.req > li {
	  background: var(--light);
	  border-radius: var(--rl);
	  padding: 22px 24px;
	  border-left: 4px solid var(--navy);
	}

	.req ul li {
	  position: relative;
	  line-height: 1.8;
	  padding-left: 1.5em;
	}

	.req ul li::before {
	  content: '✓';
	  color: var(--sage);
	  font-weight: 700;
	  flex-shrink: 0;
	  position: absolute;
	  top: 0;
	  left: 0;
	}

	.req h4 {
	  margin: 0 0 1em;
	}

	/*
	onboarding section
	*/

	.acc {
	  list-style: none;
	  margin: 1.5em 0 6em;
	  padding: 0;
	}

	.acc ol {
	  margin: .5em .25em;
	  padding: 1em 2em;
	  border-radius: 1em;
	}

	.acc h4 label {
	  margin: 0;
	  padding: 1em;
	  border-radius: 1em;
	  border: 1px solid var(--border);
	  transition: background .2s;
	  cursor: pointer;
	}

	.acc label {
	  display: block;
	  background: #fff;
	}

	.itm input[type=checkbox] {
	  position: absolute;
	  right: 100vw;
	}

	.acc input[type=checkbox]:checked ~ h4 label {
	  color: #fff;
	  background: var(--navy);
	}

	.acc label:hover {
	  background: #fafafa;
	}

	.acc ol {
	  position: absolute;
	  right: 100vw;
	  background: #fff;
	}

	.acc input[type=checkbox]:checked ~ ol {
	  position: relative;;
	  right: 0;
	}

	.onbadm {
	  margin: 3em 0;
	  padding: 0;
	  list-style: none;
	}

	.onbadm ul {
	  margin: 1em 0 0 .5em;
	  padding: 0;
	  list-style: none;
	}

	.onbadm ul li::before {
	  content: '·';
	  position: relative;
	  right: .5em;
	  color: var(--muted);
	}

	.icn {
	  display: block;
	  font-size: 26px;
	  margin-bottom: 8px;
	}

	.onbadm .ic p:first-child {
	  font-size: 1em;
	  font-weight: 700;
	  text-transform: uppercase;
	  letter-spacing: 2px;
	  margin: 0;
	  color: var(--tealb);
	}

	.tblwrp {
	  margin: 1.6em 0;
	  overscroll-behavior-x: contain;
	  overflow-x: auto;
	}

	.cnsnt {
	  border: solid #ccc;
	  border-width: 0 0 1px 1px;
	  border-collapse: collapse;
	  width: 1000px;
	}

	.cnsnt th {
	  background: var(--navy);
	  color: #fff;
	  padding: 10px 14px;
	  text-align: left;
	  font-family: 'Lora',serif;
	  font-weight: 600;
	  white-space: nowrap;
	}

	.cnsnt th, 
	.cnsnt td {
	  border: solid #ccc;
	  border-width: 1px 1px 0 0;
	  padding: 1em;
	}

	.cnsnt td {
	  background: #fff;
	}

	.alrt {
	  background: #fff8e1;
	  border: 1px solid #e8c97a;
	  border-radius: var(--r);
	  padding: 1em;
	  color: var(--text);
	  line-height: 1.6;
	  margin: 0 0 1lh;
	}

	.alrt p {
	  padding: 0;
	  margin: 0;
	}

	.alrt strong {
	  color: var(--gold);
	}

	.regform,
	.postli > li {
	  background: #fff;
	  padding: 1em;
	  border-radius: var(--rl);
	  padding: 22px 22px 18px;
	  box-shadow: var(--sh);
	}

	/*
	dashboard
	*/

	.dash {
	  background: var(--navy);
	  color: rgba(255, 255, 255, .9);
	}

	.dash h2 {
	  color: var(--teal);
	}

	.dash h4,
	.dash h3 {
	  color: #fff;
	}

	.dli {
	  list-style: none;
	  margin: 0;
	  padding: 0;
	}

	.dli li {
	  background: rgba(255,255,255,.065);
	  border: 1px solid rgba(255,255,255,.1);
	  border-radius: var(--rl);
	  color: rgba(255, 255, 255, .8);
	  margin: 1em auto;
	  padding: 17px 20px;
	  display: flex;
	  align-items: start;
	  justify-content: center;
	  gap: 15px;
	  gap: var(--gap);
	}

	.dli strong {
	  width: 40px;
	  height: 40px;
	  background: var(--tealb);
	  border-radius: 9px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 18px;
	  flex-shrink: 0;
	}

	.dli strong,
	.dli p,
	.dli h4 {
	  margin-top: .25em;
	}

	.dli p {
		margin: .25em 0;
	}

	/*
	registration form
	*/

	.tppd {
	  margin-top: 2em;
	}

	.rfrm label {
	  display: block;
	  font-weight: 600;
	}

	.rfrm button,
	.rfrm select,
	.rfrm textarea,
	.rfrm input[type=email],
	.rfrm input[type=tel],
	.rfrm input[type=text] {
	  width: 100%;
	}

	.rfrm button {
	  background: var(--tealb);
	  color: #fff;
	}

	.rfrm button:hover {
	  background: var(--tealh);
	  transform: translateY(-1px);
	  box-shadow: 0 4px 18px rgba(0,151,167,.38);
	}

	.ra ul {
	  list-style: none;
	  display: flex;
	  flex-direction: column;
	  gap: 11px;
	  margin: .5em 0;
	  padding: 0;
	}

	.ra li {
	  display: flex;
	  align-items: flex-start;
	  gap: 9px;
	  color: var(--text);
	}

	.ra li:before {
	  content: '→';
	  color: var(--tealb);
	  font-weight: 700;
	  flex-shrink: 0;
	}

	.rasub {
	  margin-top: 26px;
	  padding: 18px 20px;
	  background: #fff;
	  border-radius: var(--rl);
	  border: 1px solid var(--border);
	}

	.rasub h4 {
	  font-size: var(--small);
	  font-weight: 700;
	  text-transform: uppercase;
	  letter-spacing: 1px;
	  color: var(--muted);
	  margin: .5em 0;
	}

	/*
	resources
	*/

	.res ul {
		list-style: none;
		padding-left: 0;
		margin-left: 0;
	}

}