@font-face {
  font-family: "Dirk Test";
  src: url("../fonts/DirkTest-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html,
body {
  height: 100%;
}

/* Exact green sampled from the mock (rgb 132,173,63) */
body {
  font-family: "Dirk Test", "Arial Black", sans-serif;
  background-color: #84ad3f;
  color: #fff;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

/*
 * All geometry derived from the 1366x768 mock.
 * Corner images are cropped straight from the mock with the flat
 * background green keyed to transparency, so they can safely overlap
 * each other and the text at any viewport size.
 */

.corner {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* crop 340x565 @ (0,0) */
.corner--tl {
  top: 0;
  left: 0;
  width: 24.89vw;
}

/* crop 320x320 @ (1046,0) */
.corner--tr {
  top: 0;
  right: 0;
  width: 23.43vw;
}

/* crop 310x200 @ (0,568) */
.corner--bl {
  bottom: 0;
  left: 0;
  width: 22.69vw;
}

/* crop 286x368 @ (1080,400) */
.corner--br {
  bottom: 0;
  right: 0;
  width: 20.94vw;
}

/* Jagged white logo plate — crop 500x290 @ (433,0), horizontally centred */
.plate {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36.6vw;
  z-index: 2;
}

.content {
  position: absolute;
  top: 42.8%;
  left: 50%;
  transform: translateX(-50%);
  width: min(90vw, 800px);
  z-index: 3;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.05vw;
}

.copy {
  font-size: clamp(15px, 2.05vw, 30px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.instagram-btn {
  display: inline-block;
  margin-top: 1.9vw;
  padding: 0.55vw 1.3vw;
  background: #fff;
  color: #84ad3f;
  font-family: inherit;
  font-size: clamp(12px, 1.55vw, 23px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

.instagram-btn:hover,
.instagram-btn:focus-visible {
  transform: translateY(-2px);
}

.instagram-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Short viewports — pull the content up so it clears the bottom assets */
@media (min-width: 701px) and (max-height: 620px) {
  .content {
    top: 40%;
    gap: 1.6vw;
  }

  .copy {
    font-size: clamp(13px, 1.8vw, 24px);
  }
}

/* Mobile — mock is a desktop layout; stack sensibly on small screens.
 * Content stays position:relative so its z-index keeps it above the
 * corner artwork. */
@media (max-width: 700px) {
  .br-d {
    display: none;
  }

  .page {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .plate {
    width: 58vw;
  }

  .corner--tl { width: 30vw; }
  .corner--tr { width: 34vw; }
  .corner--bl { width: 30vw; }
  .corner--br { width: 32vw; }

  /* clearance for the top artwork (plate + bag ≈ 52vw) and bottom
   * artwork (bags/bowls ≈ 48vw); any leftover space centres the text */
  .page {
    padding: 52vw 0 48vw;
  }

  .content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: auto;
    width: min(88vw, 480px);
    gap: 1.25rem;
  }

  .copy {
    font-size: 1rem;
    line-height: 1.3;
  }

  .instagram-btn {
    margin-top: 0.5rem;
    font-size: 0.95rem;
    padding: 0.7rem 1.8rem;
  }
}