/* Cover page shown on every visit until you click. Layout, colours and wording follow a typical
   education-department homepage; it is built from scratch and uses no logos, seals or photos. */

html.gated {
  overflow: hidden;
  scrollbar-gutter: auto; /* no empty strip beside the cover page */
  background: #fff;
}
html.gated body > :not(#gate) { visibility: hidden; }
html:not(.gated) .gate { display: none; } /* e.g. pyrite embedded in the about:blank shield tab */

.gate {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  color: #393939;
  color-scheme: light;
  scrollbar-color: auto;
  cursor: default;
  font: 400 16px/1.5 "Rubik", "Source Sans Pro", "Segoe UI", Arial, sans-serif;
}
/* plain grey scrollbar, so it does not give the gold theme away */
.gate::-webkit-scrollbar { width: 15px; height: 15px; }
.gate::-webkit-scrollbar-track { background: #f1f1f1; }
.gate::-webkit-scrollbar-thumb { background: #c1c1c1; border: 0; border-radius: 0; }

.gate *, .gate *::before, .gate *::after { box-sizing: border-box; }
.gate a { color: inherit; text-decoration: none; cursor: pointer; }
.gate-wrap { width: min(100% - 48px, 1200px); margin: 0 auto; }

/* header */
.gate-head { background: #00303c; color: #fff; }
.gate-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 98px; }
.gate-brand { font-size: 24px; letter-spacing: .1px; }
.gate-tools { display: flex; align-items: center; gap: 28px; }
.gate-contact { font-size: 13px; text-decoration: underline !important; }
.gate-search { display: flex; width: 224px; height: 40px; }
.gate-input { flex: 1; display: flex; align-items: center; padding: 0 14px; border-radius: 3px 0 0 3px; background: #ececec; color: #666; font-size: 14px; }
.gate-sbtn { display: grid; place-items: center; width: 40px; border-radius: 0 3px 3px 0; background: #0f7b80; color: #fff; }
.gate-sbtn svg { width: 18px; height: 18px; }

/* nav */
.gate-nav { background: #076369; }
.gate-nav .gate-wrap { display: flex; justify-content: space-between; }
.gate-nav a { display: flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px; color: #fff; font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.gate-nav a:hover { background: #0a7a81; }
.gate-nav svg { width: 10px; height: 10px; }

/* hero + cards */
.gate-hero { background: linear-gradient(#002029 35%, #076369 132%); color: #fff; padding-top: 58px; }
.gate-hero h1 { margin: 0; max-width: 640px; padding-bottom: 130px; font-size: 56px; font-weight: 300; line-height: 70px; }

.gate-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: -64px; }
.gate-card { display: flex; flex-direction: column; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }
.gate-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
/* photos are loaded from ed.gov; they fade in over the colour block and are removed if they fail */
.gate-photo img, .gate-sq img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.gate-photo img.on, .gate-sq img.on { opacity: 1; }
.gate-photo.p1 { background: radial-gradient(60% 70% at 30% 30%, rgba(255,255,255,.35), transparent 70%), linear-gradient(160deg, #cbd8da, #8ea6ab 55%, #5d7a80); }
.gate-photo.p2 { background: radial-gradient(60% 70% at 70% 35%, rgba(255,255,255,.3), transparent 70%), linear-gradient(160deg, #dccdbd, #a68e74 55%, #6e5a47); }
.gate-photo.p3 { background: radial-gradient(60% 70% at 40% 30%, rgba(255,255,255,.3), transparent 70%), linear-gradient(160deg, #bccadb, #7f95b2 55%, #4d6385); }
.gate-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px 24px 28px; }
.gate-body h2 { margin: 0 0 10px; color: #00303c; font-size: 24px; font-weight: 500; line-height: 1.25; }
.gate-body p { margin: 0 0 20px; }
.gate-btn { margin-top: auto; padding: 11px 20px; border-radius: 4px; background: #005ea2; color: #fff; font-weight: 500; }
.gate-btn:hover { background: #1a4480; }

/* higher education tiles */
.gate-higher { padding: 72px 0 8px; }
.gate-eyebrow { margin: 0 0 6px; color: #076369; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gate-higher h2 { margin: 0 0 10px; color: #00303c; font-size: 32px; font-weight: 500; line-height: 1.2; }
.gate-lede { margin: 0 0 28px; max-width: 640px; }
.gate-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.gate-tile { display: flex; flex-direction: column; }
.gate-sq { position: relative; aspect-ratio: 1; overflow: hidden; margin-bottom: 14px; }
.gate-sq.q1 { background: linear-gradient(160deg, #cfd9c5, #8aa383); }
.gate-sq.q2 { background: linear-gradient(160deg, #cbd3dd, #8393a8); }
.gate-sq.q3 { background: linear-gradient(160deg, #d9d0bf, #a39076); }
.gate-sq.q4 { background: linear-gradient(160deg, #bfd3d6, #7ea1a6); }
.gate-tile strong { color: #00303c; font-size: 20px; font-weight: 500; line-height: 1.25; }
.gate-tile span { margin-top: 4px; color: #005ea2; text-decoration: underline; }

.gate-ferpa { padding: 56px 0 0; }
.gate-ferpa h2 { margin: 0 0 10px; color: #00303c; font-size: 26px; font-weight: 500; line-height: 1.25; }
.gate-ferpa p { max-width: 640px; margin: 0 0 18px; }
.gate-ferpa .gate-btn { display: inline-block; }

/* sections */
.gate-section { padding: 64px 0 8px; }
.gate-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.gate-section h2 { margin: 0 0 12px; color: #00303c; font-size: 26px; font-weight: 500; line-height: 1.25; }
.gate-section p { margin: 0 0 14px; }
.gate-links a { display: block; padding: 3px 0; color: #005ea2; text-decoration: underline; }
.gate-links a:hover { color: #1a4480; }

/* footer */
.gate-foot { margin-top: 72px; padding: 44px 0 64px; background: #00303c; color: #fff; }
.gate-foot .gate-wrap { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; }
.gate-foot-brand { font-size: 22px; }
.gate-foot-links { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 36px; align-content: start; font-size: 14px; }
.gate-foot a { text-decoration: underline; }

.gate-help { position: fixed; right: 18px; bottom: 18px; z-index: 2; padding: 12px 16px; border-radius: 4px; background: #005ea2; color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }

@media (max-width: 900px) {
  .gate-top { min-height: 74px; }
  .gate-brand { font-size: 19px; }
  .gate-search { display: none; }
  .gate-nav .gate-wrap { overflow: hidden; justify-content: flex-start; }
  .gate-nav a { padding: 0 14px; }
  .gate-hero { padding-top: 40px; }
  .gate-hero h1 { padding-bottom: 110px; font-size: 34px; line-height: 42px; }
  .gate-cards { grid-template-columns: 1fr; margin-top: -56px; }
  .gate-tiles { grid-template-columns: 1fr 1fr; gap: 20px; }
  .gate-grid3 { grid-template-columns: 1fr; gap: 36px; }
  .gate-foot .gate-wrap { grid-template-columns: 1fr; }
  .gate-foot-links { grid-template-columns: 1fr 1fr; }
}