@import url('https://fonts.bunny.net/css?family=barlow:400,700|barlow-condensed:400,700,900&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #c8c8c8;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  padding: 2rem;
  font-family: 'Barlow', Arial, sans-serif;
}
a {
  color: black;
  text-decoration: none;
}
/* A4 poster shell */
.poster {
  background: #fff;
  width: 210mm;
  min-height: 297mm;
  padding: 10mm 10mm 8mm 10mm;
  box-shadow: 0 6px 40px rgba(0,0,0,0.22);
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════
   HEADER: title box + cube
═══════════════════════════ */
.header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 25mm;
  align-items: stretch;
  margin-bottom: 6mm;
}

.title-box {
  border: 3.5px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.title-box h1 {  
  -webkit-text-stroke: 3px #ffffff; 
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  font-size: 62pt;
  line-height: 0.88;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000;
  padding: 4mm 4mm 0 4mm;
}

.title-meta {
  background: #000;
  color: #fff;
  padding: 2.5mm 4mm;
  margin-top: 4mm;
}

.title-meta .email {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 1.5mm;
}

.title-meta .tagline {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 8pt;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Cube image */
.cube-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cube-wrap img {
  width: 90%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* ═══════════════════════════
   INTRO TEXT
═══════════════════════════ */
.intro {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 13.5pt;
  line-height: 1.32;
  color: #000;
  margin-bottom: 5.5mm;
}

/* ═══════════════════════════
   INFO BOXES
═══════════════════════════ */
.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 7mm;
}

.info-box {
  padding: 3.5mm 4mm 4.5mm 4mm;
  display: flex;
  flex-direction: column;
}

.info-box.red    { background: #d32a2a; }
.info-box.blue   { background: #1e8fd5; }
.info-box.yellow { background: #f5d800; }
.info-box.green  { background: #6ab04c; }

.info-label {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 12pt;
  font-weight: 400;
  color: #000;
  margin-bottom: 1mm;
}

.info-value {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  font-size: 24pt;
  line-height: 1.0;
  color: #000;
}

/* ═══════════════════════════
   SECTION HEADING
═══════════════════════════ */
.section-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #000;
  padding-bottom: 2mm;
  border-bottom: 2px solid #000;
  margin-bottom: 0;
}

/* ═══════════════════════════
   FEATURE LIST
═══════════════════════════ */
.features {
  list-style: none;
  border-bottom: 2px solid #000;
  margin-bottom: 0;
  /*flex: 1;*/
}

.features li {
  display: grid;
  grid-template-columns: 13mm 1fr;
  align-items: start;
  padding: 3mm 0 2.5mm 0;
  border-bottom: 1px solid #ddd;
}

.features li:last-child {
  border-bottom: none;
}

.feat-num {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-size: 32pt;
  font-weight: 900;
  line-height: 1;
  color: #1e8fd5;
  padding-top: 0.5mm;
}

.feat-text {
  padding-top: 1mm;
}

.feat-text strong {
  display: block;
  font-family: 'Barlow', Arial, sans-serif;
  font-weight: 700;
  color: #000;
  margin-bottom: 0.8mm;
}

.feat-text span {
  font-family: 'Barlow', Arial, sans-serif;
  font-weight: 400;
  color: #111;
  line-height: 1.3;
}

/* ═══════════════════════════
   FOOTER
═══════════════════════════ */
.footer {
  padding-top: 4mm;
  margin-top: auto;
}

.footer-title {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 700;
  font-size: 7pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #000;
  margin-bottom: 1mm;
}

.footer-text {
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 7.5pt;
  font-weight: 400;
  color: #333;
  line-height: 1.4;
}

/* ═══════════════════════════
   RESPONSIVE
═══════════════════════════ */
@media (max-width: 720px) {
  body { padding: 0; }
  .poster {
    width: 100%;
    min-height: unset;
    padding: 5mm;
  }
  .title-box h1 { font-size: 36pt; }
  .cube-wrap img { width: 44mm; }
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .intro { font-size: 11pt; }
}