/* ============================================================
   Pocket Collection — one-pager
   Colours:  background #feef63 (yellow) · text #1b1069 (indigo)
   Fonts:    Boldonse (headline) · Inter (body)
   Breakpoints (mobile-first):
     base            → Mobile           (Figma frame 402)
     >= 768px        → Tablet portrait  (Figma frame 768)
     >= 1024px       → Tablet landscape (Figma frame 1024)
     >= 1440px       → Desktop          (Figma frame 1728)
   ============================================================ */

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

html,
body {
  margin: 0;
  padding: 0;
  /* Yellow fills the whole viewport — even beyond the content. */
  background-color: #feef63;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1b1069;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Page height is driven by content OR the browser, whichever is taller. */
.page {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #feef63;
}

/* Centred artboard; caps at the 1728px desktop width. */
.container {
  width: 100%;
  min-width: 0; /* allow the flex item to shrink so text can wrap */
  max-width: 1728px;
  padding: 80px 40px; /* Mobile */
}

/* Content column — left aligned, capped at the design's max content width. */
.content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 720px;
  gap: 48px; /* Mobile */
}

/* Text blocks stretch to the column width and wrap within it. */
.title,
.intro,
.footer {
  align-self: stretch;
  min-width: 0;
}

/* ---- Hero image ---- */
.hero {
  display: block;
  width: 240px; /* Mobile */
  height: auto;
  max-width: 100%;
}

/* ---- Headline ---- */
.title {
  margin: 0;
  font-family: "Boldonse", "Inter", sans-serif;
  font-weight: 400;
  font-size: 40px; /* Mobile */
  line-height: 1.4;
  color: #1b1069;
  overflow-wrap: break-word;
  max-width: 100%;
}

/* ---- Intro copy ---- */
.intro {
  margin: 0;
  font-size: 18px; /* Mobile */
  font-weight: 400;
  line-height: 1.6;
  color: #1b1069;
}

.intro strong {
  font-weight: 900;
}

/* ---- Social links ---- */
.socials {
  display: flex;
  align-items: center;
  gap: 48px;
}

.social {
  display: inline-flex;
  color: #1b1069;
  line-height: 0;
  transition: opacity 0.15s ease;
}

.social:hover,
.social:focus-visible {
  opacity: 0.65;
}

.social img {
  display: block;
  width: 48px;
  height: 48px;
}

/* ---- Footer ---- */
.footer {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  color: #1b1069;
}

.footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer a:hover,
.footer a:focus-visible {
  text-decoration: none;
}

/* ============================================================
   Tablet portrait  (>= 768px)
   ============================================================ */
@media (min-width: 768px) {
  .container {
    padding: 128px 120px;
  }
  .content {
    gap: 64px;
  }
  .hero {
    width: 320px;
  }
  .title {
    font-size: 60px;
  }
  .intro {
    font-size: 20px;
  }
}

/* ============================================================
   Tablet landscape  (>= 1024px)
   ============================================================ */
@media (min-width: 1024px) {
  .container {
    padding: 128px 160px;
  }
  .hero {
    width: 320px;
  }
  .title {
    font-size: 100px;
  }
}

/* ============================================================
   Desktop  (>= 1440px)
   ============================================================ */
@media (min-width: 1440px) {
  .container {
    padding: 128px 256px;
  }
  .hero {
    width: 480px;
  }
  .title {
    font-size: 100px;
  }
}