/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* basic reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #2d2d2d;
  font-family: Arial, Helvetica, sans-serif;
  color: #222;
}

/* overall page */
.page {
  width: 1200px;
  margin: 0 auto;
  background: #efefef;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-rows: 50px 36px auto;
  grid-template-areas:
    "rail header"
    "rail nav"
    "rail main";
}

/* left rail */
.left-rail {
  grid-area: rail;
  background: #d9d9d9;
  border-right: 2px solid #444;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
  position: relative;
}

.rail-icon {
  width: 34px;
  height: 34px;
  border: 2px solid #444;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.rail-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin-top: auto;
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #222;
}

/* header */
.top-header {
  grid-area: header;
  background: #b8c94a;
  border-bottom: 2px solid #444;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.brand {
  font-size: 2rem;
  font-weight: bold;
  text-transform: lowercase;
  color: white;
  letter-spacing: 1px;
}

/* nav */
.top-nav {
  grid-area: nav;
  display: flex;
  background: linear-gradient(to bottom, #f5f5f5, #cfcfcf);
  border-bottom: 2px solid #444;
}

.top-nav a {
  text-decoration: none;
  color: #111;
  padding: 8px 16px;
  border-right: 2px solid #444;
  text-transform: lowercase;
  font-size: 0.95rem;
}

.top-nav a:hover {
  background: #dce6ff;
}

/* main */
.main-content {
  grid-area: main;
  padding: 14px;
}

/* reusable panel style */
.panel {
  background: #f9f9f9;
  border: 2px solid #b8b8b8;
  box-shadow: inset 0 0 0 1px #ffffff;
}

/* hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  padding: 16px;
  margin-bottom: 16px;
  background: #e7f0b6
}

.hero-left {
  min-height: 220px;
  background:
    radial-gradient(circle, #c6d96a 22%, transparent 24%) 0 0 / 24px 24px;
  padding: 28px;
  position: relative;
}

.hero-left h1 {
  font-size: 5rem;
  font-weight: 300;
  color: #7ea1dc;
  letter-spacing: 10px;
  text-transform: lowercase;
  margin-bottom: 20px;
}

.barcode {
  width: 320px;
  height: 85px;
  background: repeating-linear-gradient(
    to right,
    #222 0px,
    #222 2px,
    #fff 2px,
    #fff 5px
  );
  margin-bottom: 20px;
}

.hero-sub {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #555;
  border-top: 2px solid #aaa;
  padding-top: 8px;
}

.hero-right {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-PNG {
  max-width: 100%;
  height: auto;
  width: 225px; /* control size here */
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(3, 70px);
  gap: 10px;
}

.square {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}

.blue {
  background: #98b5e8;
}

.green {
  background: #bcc64d;
}

.white {
  background: #f5f5f5;
  border: 2px solid #ddd;
}

/* section label */
.section-title {
  background: #bcc64d;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  padding: 12px 16px;
  margin-bottom: 16px;
  letter-spacing: 1px;
}

/* 3-column area */
.content-grid {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  gap: 18px;
}

.left-column,
.center-column,
.right-column {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* cards */
.card {
  padding: 14px;
}

.card h2,
.card h3,
.intro-box h3,
.art-box h3,
.news-box h3 {
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 1rem;
  border-bottom: 2px dotted #777;
  padding-bottom: 6px;
}

.olive {
  background: #bcc64d;
}

.dressup-box {
  padding: 0;
  overflow: hidden;
}

.dressup-map {
  position: relative;
  width: 100%;
}

.dressup-box img {
  width: 100%;
  height: auto;
  display: block;
}

/* invisible clickable areas */
.dress-btn {
  position: absolute;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
}

/* tiny cosmetic hover */
.dress-btn:hover {
  background: rgba(173, 200, 235, 0.12);
  outline: 1px solid #88a4d1;
}

/* tiny cosmetic selected effect */
.dress-btn.active {
  background: rgba(173, 200, 235, 0.18);
  outline: 1px solid #5f84c9;
  box-shadow: none;
}

/* clickable spots over the blue clothing icons */
.hat {
  left: 25.5%;
  top: 16.2%;
  width: 12%;
  height: 7.5%;
}

.top {
  left: 25.5%;
  top: 26.8%;
  width: 12%;
  height: 10.5%;
}

.shorts {
  left: 25.5%;
  top: 39.5%;
  width: 12%;
  height: 9.5%;
}

.boots {
  left: 25.5%;
  top: 52.8%;
  width: 12%;
  height: 10.5%;
}

.bag {
  left: 25.5%;
  top: 66.8%;
  width: 12%;
  height: 10%;
}

/* center intro */
.intro-box {
  padding: 16px;
  min-height: 220px;
}

/* art */
.art-box {
  padding: 16px;
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.art-item {
  background: #dfe8a8;
  aspect-ratio: 1 / 1;
  border: 2px solid #c8c8c8;
}

.art-item.more {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #b44;
  background: #fff7f2;
}

/* news */
.news-box {
  padding: 16px;
  background: #f8f8f8;
}

.news-frame {
  background-image: url("pink-frame.jpeg");
  background-size: 100% 100%;   /* fills entire right section */
  background-position: center;
  background-repeat: no-repeat;

  width: 100%;
  min-height: 520px;            /* adjust if you want taller */
  box-sizing: border-box;

  padding: 90px 35px 35px 35px; /* top right bottom left */
}

.news-item {
  background: #a8c0eb;
  padding: 20px;
  margin-bottom: 24px;
  border: 2px solid #88a4d1;
  box-sizing: border-box;
  width: 100%;
}

.news-item:last-child {
  margin-bottom: 0;
}

.news-item h4 {
  text-transform: uppercase;
  margin-bottom: 8px;
  font-size: 0.95rem;
}