/* Krafting Krowns — join.kraftingkrowns.com
   Built 1:1 from the Figma file "VIP KK", frame newFitzVipweb-01 2 (1440 x 8436).
   Colours, type, sizes and vertical positions are the frame's own values.
   Grey rounded blocks are the frame's image placeholders — photography goes in later. */

:root {
  --orange:  #F18900;
  --red:     #EF4907;
  --black:   #000000;
  --white:   #FFFFFF;
  --grey:    #D9D9D9;

  --canvas:  1440px;
  --edge:    54px;    /* frame content runs x=54 .. 1387 */
  --gutter:  102px;   /* between the two 615px columns */
  --inset:   78px;    /* left-hand text blocks sit at x=132 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Source Serif 4", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* ---------- type ---------- */

.display {
  font-family: "Pirata One", cursive;
  font-weight: 400;
  font-size: clamp(44px, 5.56vw, 80px);
  line-height: 1.285;
  color: var(--orange);
  margin: 0;
}
.display--hero   { font-size: clamp(52px, 6.67vw, 96px); line-height: 1.042; max-width: 629px; }
.display--center { text-align: center; }
.display--white  { color: var(--white); }

.body {
  font-size: 20px;
  line-height: 1.37;
  font-weight: 400;
  margin: 0;
}
.body--light  { font-weight: 300; }
.body--bold   { font-weight: 700; }
.body--center { text-align: center; }
.body--white  { color: var(--white); }

/* ---------- buttons + fields ---------- */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 303px;
  height: 55px;
  border: 0;
  border-radius: 6px;
  background: var(--black);
  color: var(--white);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.37;
  text-decoration: none;
  cursor: pointer;
}

/* ---------- top bar ---------- */

.topbar { padding-top: 52px; }
.topbar__logo { width: 139px; height: auto; margin: 0 auto; }
.topbar__rule {
  margin-top: 31px;
  border-top: 1px solid var(--black);
  margin-inline: max(calc((100% - var(--canvas)) / 2 + 50px), 50px);
}

/* ---------- hero ---------- */

.hero {
  max-width: var(--canvas);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 706fr 734fr;
  align-items: start;
}
.hero__image img { width: 700px; max-width: 100%; margin-left: 2px; }
.hero__copy { padding: 32px 75px 0 0; }
.hero__copy .body { margin-top: 16px; }
.hero__copy .btn  { margin-top: 24px; }

/* ---------- full-bleed bands ---------- */

.band--orange { background: var(--orange); padding: 14px 0; }
.band--red    { background: var(--red);    padding: 15px 0; }

.band__inner {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-left: 19.375%;   /* text at x=279 */
  padding-right: 15.7%;    /* stack ends at x=1214 */
  display: grid;
  grid-template-columns: 421fr 514fr;
  align-items: center;
  gap: 6px;
}
.band__text {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.37;
  margin: 0;
  padding-right: 20px;
}
.band__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.band__input {
  width: 100%;
  height: 55px;
  border: 0;
  border-radius: 6px;
  background: var(--white);
  padding: 0 16px;
  font-family: inherit;
  font-size: 20px;
}

/* ---------- game logos ---------- */

.gamelogo { display: flex; justify-content: center; }
.gamelogo img        { width: 331px; height: auto; }
.gamelogo--ygm img   { width: 322px; }

/* ---------- alternating rows ---------- */

.row {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--edge);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: start;
}
.col--text .body { margin-top: var(--bodytop, 44px); }
.col--left {
  margin-left: var(--inset);
  margin-right: calc(var(--inset) * -0.87);
}

/* grey image placeholders — photography goes in later */
.ph { background: var(--grey); border-radius: 36px; margin-top: var(--imgtop, 0); }
.ph--square { aspect-ratio: 1 / 1; }
.ph--wide   { aspect-ratio: 1333 / 373; }
.ph--proof  { aspect-ratio: 793 / 459; width: min(793px, 100%); margin-inline: auto; }

.stack {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: var(--edge);
}
.stack .narrow { max-width: 1097px; margin-inline: auto; }
.stack .intro  { max-width: 864px;  margin-inline: auto; }

/* ---------- VIP offer ---------- */

.vipblock { background: var(--black); padding-bottom: 37px; display: flow-root; }
.vipblock .display { max-width: 1163px; margin-inline: auto; }
.vipblock .narrow  { max-width: 1097px; margin-inline: auto; }

.offer {
  max-width: var(--canvas);
  margin-inline: auto;
  padding: 0 53px 0 172px;
  display: grid;
  grid-template-columns: 549fr 615fr;
  gap: 51px;
  align-items: start;
}
.offer__image img { width: 549px; max-width: 100%; }
.offer__list {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.372;
  margin: 0;
}
.offer__copy .offer__list + .offer__list { margin-top: 10px; }

/* ---------- guarantees ---------- */

.guarantees {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-inline: 172px;
}
.guarantees__grid {
  display: grid;
  grid-template-columns: repeat(3, 247px);
  justify-content: center;
  gap: 30px;
}

/* ---------- footer ---------- */

.footer {
  background: var(--orange);
  padding: 78px 144px 33px;
  text-align: center;
}
.footer__social { font-size: 32px; font-weight: 700; line-height: 1.372; margin: 0; }
.footer__legal  { font-size: 20px; font-weight: 700; line-height: 1.372; margin: 0; }

/* Every block with a fixed position in the frame carries --top, solved against
   the frame's own Y coordinates. Doubled selector so it beats the component rules. */
[data-fig][data-fig] { margin-top: var(--top, 0); }

/* ---------- tablet ---------- */

@media (max-width: 1100px) {
  .col--left  { margin-left: 0; margin-right: 0; }
  .row        { gap: 48px; }
  .hero__copy { padding-right: var(--edge); }
  .offer      { padding-inline: var(--edge); gap: 32px; }
  .guarantees { padding-inline: var(--edge); }
  .guarantees__grid { grid-template-columns: repeat(3, 1fr); }
  .footer     { padding-inline: var(--edge); }
}

/* ---------- mobile: one column, text then image ---------- */

@media (max-width: 760px) {
  :root { --edge: 24px; }

  /* the frame's fixed vertical positions don't apply once blocks stack */
  [data-fig][data-fig] { margin-top: 0; }

  .topbar { padding-top: 28px; }
  .topbar__rule { margin-inline: var(--edge); margin-top: 20px; }

  .hero, .row, .offer {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-inline: var(--edge);
  }
  .hero[data-fig] { margin-top: 24px; }
  .hero__image { order: 2; }
  .hero__copy  { order: 1; padding: 0; }
  .hero__image img { width: 100%; margin-left: 0; }

  /* text block first, image second — every row */
  .row[data-fig] { margin-top: 48px; }
  .row .col--text { order: 1; }
  .row .col       { order: 2; }
  .col--text .body { margin-top: 20px; }
  .ph { margin-top: 0; }

  /* placeholders keep a usable shape once the layout is one column wide */
  .ph--wide, .ph--proof { aspect-ratio: 4 / 3; }

  .stack[data-fig] { padding: 48px var(--edge) 0; }
  .stack .ph[data-fig], .stack p[data-fig] { margin-top: 20px; }
  .gamelogo[data-fig] { margin-top: 48px; }
  .gamelogo img, .gamelogo--ygm img { width: 240px; }

  .band__inner {
    grid-template-columns: 1fr;
    padding-inline: var(--edge);
    gap: 16px;
    text-align: center;
  }
  .band__text  { padding-right: 0; }
  .band--orange, .band--red { padding: 24px 0; }
  .band__stack { width: 100%; }
  .btn { width: 100%; max-width: 360px; }

  .offer__image { order: 2; }
  .offer__copy  { order: 1; }
  .offer__image img { width: 100%; }
  .offer__list  { font-size: 26px; }
  .offer__copy .display { margin-top: 0; }
  .offer__copy .offer__list { margin-top: 16px; }

  .vipblock[data-fig] { margin-top: 48px; padding: 32px var(--edge); }
  .vipblock .display[data-fig] { margin-top: 0; }
  .vipblock .narrow[data-fig] { margin-top: 20px; }

  .offer[data-fig] { margin-top: 40px; }
  .offer .display[data-fig] { margin-top: 0; }
  .offer__list[data-fig] { margin-top: 16px; }

  .guarantees[data-fig] { margin-top: 40px; }
  .guarantees__grid[data-fig] { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }

  .footer[data-fig] { margin-top: 48px; padding: 40px var(--edge); }
  .footer__social[data-fig] { margin-top: 0; }
  .footer__legal[data-fig] { margin-top: 24px; }
}