/* Layout primitives and page structure.
 *
 * This file intentionally contains only layout-related rules (sizing, spacing,
 * positioning). Theme/typography/component styling remains in `style.css`.
 */

:root {
  --layout-wrapper-max: 1600px;
  --layout-container-max: 800px;
  --layout-container-gutter: 10%;
}

/* Primitives */
.wrapper {
  width: 100%;
  max-width: var(--layout-wrapper-max);
  margin: 0 auto;
  position: relative;
}

.container {
  width: calc(100% - var(--layout-container-gutter));
  max-width: var(--layout-container-max);
  margin: 0 auto;
  position: relative;
}

.right {
  float: right;
}

.left {
  float: left;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.full {
  width: 100%;
}

.half {
  width: 50%;
}

@media (max-width: 1000px) {
  .half {
    width: 100%;
  }
}

.none {
  display: none;
}

/* Structure (kept byte-for-byte behavior from previous `style.css`) */
.header {
  background: #2c95f8;
  padding: 5px 20px;
}

.nav {
  background: #1e5283;
  padding: 10px 0;
  -webkit-transform: perspective(1600px) rotateX(-90deg);
  transform: perspective(1600px) rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
  position: absolute;
  top: 57px;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.nav.active {
  -webkit-transform: perspective(1600px) rotateX(0deg);
  transform: perspective(1600px) rotateX(0deg);
  -webkit-transition: 0.2s linear 0s;
  transition: 0.2s linear 0s;
}

.hero {
  background: #394551;
  color: #fff;
  height: 1020px;
  position: relative;
  padding: 265px 65px 0;
  overflow: hidden;
}

@media (max-width: 1300px) {
  .hero {
    padding: 265px 30px 0;
  }
}

@media (max-width: 1000px) {
  .hero {
    height: 600px;
    padding: 100px 65px 0;
    text-align: right;
  }
}

@media (max-width: 700px) {
  .hero {
    height: 500px;
    text-align: center;
    padding: 80px 0 0;
  }
}

.hero:after {
  content: url(hero.svg);
  display: block;
  width: 100%;
  height: auto;
  position: absolute;
  bottom: -50px;
  left: 0;
}

.home-nav a {
  display: block;
  color: #394551;
  height: 340px;
  padding: 195px 65px 0;
}

@media (max-width: 1300px) {
  .home-nav a {
    padding: 195px 30px 0;
  }
}

@media (max-width: 1000px) {
  .home-nav a {
    padding: 195px 65px 0;
  }
}

.content {
  margin: 100px auto 0;
}

/* Home tiles: only the outer tile box model is layout. */
.home-nav .spotlight {
  text-align: center;
  padding: 0;
  position: relative;
}

.home-nav .spotlight img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -36px 0 0 -200px;
}

@media (max-width: 700px) {
  .home-nav .spotlight img {
    width: 300px;
    margin: -22px 0 0 -150px;
  }
}