/* ======================================================
   ROOT — VARIABLES
   ====================================================== */

:root {
  /* COLORS */
  --accent-1: #1e2f6b;
  --accent-2: #1a1a1a;
  --accent-3: #7b1d14;
  --accent-4: #b5bda3;
  --accent-5: #f5f1e8;
  --accent-6: #ffffff;
  --accent-7: #d9d2c6;
  --accent-8: #e6b3ad;
  --accent-9: #000000;

  --bg-main: #f7f5f1;
  --divider: rgba(0, 0, 0, 0.2);

  /* FONTS */
  --font-title: "Rubik Bubbles", sans-serif;
  --font-title-secondary: "Rubik", sans-serif;
  --font-ui: "Fragment Mono", monospace;

  /* SIZES */
  --fs-header: 26px;
  --fs-hero: 200px;
  --fs-info: 36px;
  --fs-caption: 36px;
  --fs-footer: 20px;

  /* LINE HEIGHTS */
  --lh-tight: 110%;
  --lh-normal: 120%;

  /* LETTER SPACING */
  --ls-tight: -0.02em;
  --ls-footer: -0.04em;
  --ls-hero: 0.1em;
}

/* ======================================================
   RESET / BASE (MOBILE FIRST)
   ====================================================== */

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

body {
  margin: 0;
  background: var(--bg-main);
  color: var(--accent-9);
}

/* ======================================================
   HEADER
   ====================================================== */

.site-header {
  width: 100%;
  padding: 22px 10px;
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-link {
  font-family: var(--font-ui);
  font-size: var(--fs-header);
  font-weight: 400;
  line-height: var(--lh-normal);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

/* ======================================================
   HERO
   ====================================================== */

.hero {
  height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.hero-title {
  margin: 0;
  text-align: center;
  font-family: var(--font-title);
  font-size: var(--fs-hero);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-hero);
}

.hero-line {
  display: block;
}

.hero-meta {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
}

.hero-meta span {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* ======================================================
   MAIN
   ====================================================== */

.main {
  width: 100%;
}

/* ======================================================
   INFO
   ====================================================== */

.info {
  display: grid;
  grid-template-columns: 1fr;
}

.info-item {
  text-align: center;
  padding: 32px 10px;
}

.info-label {
  font-family: var(--font-ui);
  font-size: 14px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  display: block;
}

.info-title {
  font-family: var(--font-title-secondary);
  font-size: var(--fs-info);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

/* ======================================================
   TILES
   ====================================================== */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

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

.tile.text span {
  font-family: var(--font-title-secondary);
  font-size: var(--fs-info);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  text-align: center;
}

.tile.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* BACKGROUNDS */
.bg-accent-1 { background: var(--accent-1); }
.bg-accent-3 { background: var(--accent-3); }
.bg-accent-4 { background: var(--accent-4); }
.bg-accent-5 { background: var(--accent-5); }
.bg-accent-7 { background: var(--accent-7); }
.bg-accent-8 { background: var(--accent-8); }

/* ======================================================
   MANIFESTO
   ====================================================== */

.manifesto {
  padding-top: 112px;
  text-align: center;
}

.manifesto p {
  font-family: var(--font-title-secondary);
  font-size: 36px;
  font-weight: 700;
  line-height: var(--lh-normal);
  letter-spacing: -0.01em;
  margin: 0 auto;
  max-width: 900px;
}

/* ======================================================
   NEWSLETTER
   ====================================================== */

.newsletter {
  background: var(--accent-6);
}

/* CTA */
.newsletter-cta {
  height: 160px;
  padding: 22px 11px;
  border: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 102px;
}

.newsletter-arrow {
  width: 63px;
  height: 63px;
}

.newsletter-cta-text {
  font-family: var(--font-title-secondary);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin: 0;
  text-align: center;
}

/* IMAGE */
.newsletter-image {
  margin: 43px 0;
}

.newsletter-image img {
  width: 100%;
  height: 386px;
  object-fit: cover;
}

/* CAPTION */
.newsletter-caption {
  text-align: center;
  font-family: var(--font-title-secondary);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin-bottom: 302px;
}

/* FOOTER */
.newsletter-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 30px 20px;
}

.newsletter-footer span {
  font-family: var(--font-title-secondary);
  font-size: var(--fs-footer);
  font-weight: 800;
  letter-spacing: var(--ls-footer);
}

/* ======================================================
   TABLET ≥ 768px
   ====================================================== */

@media (min-width: 768px) {
  .info {
    grid-template-columns: repeat(3, 1fr);
  }

  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ======================================================
   DESKTOP ≥ 1260px
   ====================================================== */

@media (min-width: 1260px) {
  main,
  .hero,
  .newsletter {
    width: 1260px;
    margin: 0 auto;
  }
}