:root {
  --simon-black: #0a0a0a;
  --simon-charcoal: #202020;
  --simon-gray: #6d6d6d;
  --simon-line: #dedede;
  --simon-paper: #f5f5f3;
  --simon-white: #ffffff;
}

body {
  background: var(--simon-white);
}

body .site-header {
  border-bottom-color: #e5e5e5;
  box-shadow: none;
}

body .main-nav a[aria-current="page"] {
  position: relative;
  color: #000;
}

body .main-nav a[aria-current="page"]::after {
  content: "";
  height: 2px;
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  background: #000;
}

.simon-hero {
  position: relative;
  overflow: hidden;
  padding: 92px 8.1% 88px;
  color: #fff;
  background: #050505;
}

.simon-hero::before {
  content: "SIMON";
  position: absolute;
  right: -1.5vw;
  bottom: -3.5vw;
  color: rgba(255,255,255,.035);
  font-size: clamp(9rem, 22vw, 23rem);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.08em;
  pointer-events: none;
}

.simon-hero::after {
  content: "";
  width: 34vw;
  height: 1px;
  position: absolute;
  right: 8.1%;
  top: 52px;
  background: rgba(255,255,255,.25);
}

.simon-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1220px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  gap: 70px;
  align-items: center;
}

.simon-kicker,
.simon-section-label {
  margin: 0 0 13px;
  color: inherit;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.simon-kicker {
  color: rgba(255,255,255,.64);
}

.simon-hero h1 {
  max-width: 760px;
  margin: 0 0 25px;
  color: #fff;
  font-size: clamp(2.8rem, 5.7vw, 5.5rem);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.055em;
}

.simon-hero-copy {
  max-width: 700px;
  margin: 0 0 34px;
  color: rgba(255,255,255,.7);
  font-size: 1.03rem;
  line-height: 1.7;
}

.simon-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.simon-hero .button-gold,
.simon-upload-note .button-gold {
  color: #000;
  background: #fff;
  box-shadow: none;
}

.simon-secondary-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 0;
  color: #fff;
  font-weight: 800;
  transition: background 160ms ease, color 160ms ease;
}

.simon-secondary-link:hover {
  color: #000;
  background: #fff;
}

.simon-hero-stack {
  position: relative;
  min-height: 350px;
}

.simon-hero-sheet {
  position: absolute;
  width: min(275px, 74%);
  aspect-ratio: 8.5 / 11;
  right: 8%;
  top: 3%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0;
  background: #f8f8f6;
  box-shadow: 0 28px 70px rgba(0,0,0,.44);
  transform: rotate(5deg);
}

.simon-hero-sheet:nth-child(2) {
  right: 24%;
  top: 14%;
  background: #d9d9d6;
  transform: rotate(-7deg);
}

.simon-hero-sheet:nth-child(3) {
  right: 2%;
  top: 27%;
  background: linear-gradient(145deg, #111 0 27%, #fff 27% 100%);
  transform: rotate(1deg);
}

.simon-hero-sheet::before,
.simon-hero-sheet::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  height: 7px;
  border-radius: 0;
  background: #c9c9c6;
}

.simon-hero-sheet::before { top: 25%; }
.simon-hero-sheet::after { top: 33%; right: 38%; }
.simon-hero-sheet:nth-child(3)::before,
.simon-hero-sheet:nth-child(3)::after { background: #d5d5d2; }

.simon-overview,
.simon-products,
.simon-program,
.simon-upload-note {
  padding: 78px 8.1%;
}

.simon-overview {
  background: #fff;
}

.simon-overview-inner,
.simon-products-inner,
.simon-program-inner,
.simon-upload-inner {
  max-width: 1220px;
  margin: 0 auto;
}

.simon-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 72px;
  align-items: start;
}

.simon-section-label {
  color: #707070;
}

.simon-overview h2,
.simon-products h2,
.simon-program h2,
.simon-upload-note h2 {
  margin: 0;
  color: #090909;
  font-size: clamp(2.2rem, 3.5vw, 3.65rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
}

.simon-overview-copy {
  margin: 3px 0 0;
  color: #555;
  font-size: 1.02rem;
  line-height: 1.8;
}

.simon-products {
  border-top: 1px solid #e8e8e6;
  border-bottom: 1px solid #e8e8e6;
  background: var(--simon-paper);
}

.simon-products-head {
  max-width: 790px;
  margin-bottom: 38px;
}

.simon-products-head p:last-child {
  margin: 16px 0 0;
  color: #686868;
  line-height: 1.65;
}

.simon-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #d6d6d3;
  border: 1px solid #d6d6d3;
}

.simon-product-card {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.simon-product-card:hover {
  position: relative;
  z-index: 2;
  transform: translateY(-3px);
  box-shadow: 0 20px 38px rgba(0,0,0,.11);
}

.simon-product-media {
  position: relative;
  min-height: 238px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.03) 1px, transparent 1px),
    linear-gradient(145deg, #ececea, #d8d8d4);
  background-size: 30px 30px, 30px 30px, auto;
}

.simon-product-media::after {
  content: attr(data-replace);
  position: absolute;
  right: 12px;
  bottom: 10px;
  padding: 5px 7px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  background: rgba(255,255,255,.86);
  color: #666;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mock-sheet,
.mock-book,
.mock-map,
.mock-sign,
.mock-rack,
.mock-window {
  position: relative;
  box-shadow: 0 20px 34px rgba(0,0,0,.22);
}

.mock-sheet {
  width: 122px;
  height: 164px;
  background: linear-gradient(155deg, #fff 0 75%, #111 75%);
  transform: rotate(-5deg);
}

.mock-sheet::before,
.mock-book::before,
.mock-rack::before {
  content: "SIMON";
  position: absolute;
  top: 18px;
  left: 16px;
  color: #111;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .24em;
}

.mock-sheet::after,
.mock-book::after,
.mock-rack::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 22px;
  top: 48px;
  height: 4px;
  background: #c5c5c2;
  box-shadow: 0 12px 0 #d7d7d4, 0 24px 0 #d7d7d4, 0 36px 0 #d7d7d4;
}

.mock-book {
  width: 132px;
  height: 166px;
  background: #fff;
  transform: rotate(5deg);
}

.mock-book::before {
  color: #fff;
  background: #111;
  left: 0;
  right: 0;
  top: 0;
  padding: 18px 15px 15px;
}

.mock-book::after { top: 64px; }

.mock-map {
  width: 178px;
  height: 118px;
  border: 8px solid #fff;
  background:
    linear-gradient(30deg, transparent 46%, #a8a8a5 47% 50%, transparent 51%),
    linear-gradient(150deg, transparent 46%, #a8a8a5 47% 50%, transparent 51%),
    radial-gradient(circle at 27% 43%, #111 0 8px, transparent 9px),
    #e7e7e4;
  transform: rotate(-3deg);
}

.mock-map::after {
  content: "DIRECTORY";
  position: absolute;
  left: 10px;
  bottom: 8px;
  color: #111;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.mock-sign {
  width: 164px;
  height: 112px;
  border: 7px solid #fff;
  background: linear-gradient(140deg, #111 0 64%, #d7d7d4 64%);
  transform: perspective(500px) rotateY(-9deg);
}

.mock-sign::before {
  content: "YOU ARE HERE";
  position: absolute;
  left: 14px;
  top: 17px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
}

.mock-rack {
  width: 95px;
  height: 172px;
  background: linear-gradient(180deg, #fff 0 70%, #111 70%);
  transform: rotate(4deg);
}

.mock-window {
  width: 186px;
  height: 128px;
  border: 9px solid #292929;
  background: linear-gradient(135deg, #111 0 54%, #d9d9d5 54% 70%, #f7f7f5 70%);
  transform: perspective(600px) rotateY(8deg);
}

.mock-window::before {
  content: "EVENT";
  position: absolute;
  left: 18px;
  top: 20px;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .14em;
}

.simon-product-copy {
  min-height: 150px;
  padding: 22px 22px 25px;
}

.simon-product-copy h3 {
  margin: 0;
  color: #111;
  font-size: 1.18rem;
  letter-spacing: -.015em;
}

.simon-product-copy p {
  margin: 10px 0 0;
  color: #666;
  font-size: .86rem;
  line-height: 1.6;
}

.simon-program {
  background: #fff;
}

.simon-program-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid #dededb;
  background: #dededb;
}

.simon-program-card {
  min-height: 180px;
  padding: 28px 24px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.simon-program-card::before {
  content: "";
  width: 26px;
  height: 2px;
  display: block;
  margin-bottom: 25px;
  background: #111;
}

.simon-program-card strong {
  display: block;
  margin-bottom: 11px;
  color: #111;
  font-size: 1.03rem;
}

.simon-program-card p {
  margin: 0;
  color: #696969;
  font-size: .84rem;
  line-height: 1.6;
}

.simon-upload-note {
  color: #fff;
  background: #090909;
}

.simon-upload-note .simon-section-label,
.simon-upload-note h2 {
  color: #fff;
}

.simon-upload-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}

.simon-upload-note p {
  max-width: 720px;
  margin: 15px 0 0;
  color: rgba(255,255,255,.66);
  line-height: 1.65;
}

.simon-upload-note .button {
  min-width: 205px;
  border-radius: 0;
}

@media (max-width: 1080px) {
  .simon-hero-inner,
  .simon-overview-grid,
  .simon-upload-inner {
    grid-template-columns: 1fr;
  }

  .simon-hero-stack {
    min-height: 270px;
  }

  .simon-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .simon-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .simon-hero,
  .simon-overview,
  .simon-products,
  .simon-program,
  .simon-upload-note {
    padding-left: 20px;
    padding-right: 20px;
  }

  .simon-hero {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .simon-hero::before {
    right: -5vw;
    bottom: -1vw;
  }

  .simon-hero-stack {
    min-height: 225px;
  }

  .simon-product-grid,
  .simon-program-grid {
    grid-template-columns: 1fr;
  }

  .simon-upload-note .button {
    width: 100%;
  }
}