/* Cowbrick Games site. Measurements come from the 1728px-wide design.
   Horizontal positions use --x so the layout always spans the full width;
   sizes and vertical measurements use --u, which renders everything at 75%
   of that (never larger than 0.75px per design pixel, never smaller than
   0.55px). The phone layout below 960px stacks each section. */
:root {
  --yellow: #FBD742;
  --cream: #FFFDF4;
  --plum: #290849;
  --plum-link: #562171;
  --purple-word: #55185D;
  --mint: #F1FCF8;
  --forest: #074D3B;
  --forest-button: #236152;
  --ink: #000000;
  --x: calc(100vw / 1728);
  --u: clamp(0.55px, 75vw / 1728, 0.75px);
  --display: "BN Scouts Hand", "Gabarito", system-ui, sans-serif;
  --body: "Gabarito", system-ui, sans-serif;
}
/* Display faces. Both come in one weight; the 100-900 range maps every
   requested weight to that file so browsers never fake a bolder one.
   Gabarito 900 stands in while they load. */
@font-face { font-family: "BN Scouts Hand"; src: url("fonts/BNScoutsHand.otf") format("opentype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Xaver Handwriting"; src: url("fonts/XaverHandwriting.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #fff; color: var(--ink); font-family: var(--body); font-weight: 700; font-synthesis: none; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--plum-link); outline-offset: 3px; border-radius: 6px; }

/* Nav: 174 tall, logo at (49,49), links on a 82px baseline ending 85px from the right. */
.nav { position: relative; height: calc(174 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(85 * var(--x)) 0 calc(49 * var(--x)); background: #fff; }
.logo img { width: calc(310 * var(--u)); height: auto; }
.links { display: flex; gap: calc(66 * var(--u)); font-family: var(--display); font-weight: 900; font-size: calc(30.8 * var(--u)); line-height: 1; }
.links a[aria-current="page"] { color: var(--purple-word); }
.menu { display: none; }

/* Hero: 939 tall band of cream with the yellow swoosh masked to it; cow at the left edge. */
.hero { position: relative; height: calc(939 * var(--u)); background: var(--cream); overflow: hidden; }
/* The export spans the frame from its top edge; the hero band starts 174px down. */
.swoosh { position: absolute; left: 0; top: calc(-174 * var(--u)); width: 100%; height: auto; }
.cow { position: absolute; left: calc(15 * var(--x)); top: 0; width: calc(736 * var(--u)); height: auto; }
.hero h1 { position: absolute; left: calc(123 * var(--x)); top: calc(400 * var(--u)); margin: 0; width: calc(640 * var(--u));
  font-family: var(--display); font-weight: 900; font-size: calc(65 * var(--u)); line-height: 0.97; letter-spacing: -0.01em; }
.hero h1 em { font-style: normal; color: var(--purple-word); }

/* Our games */
.games { padding: calc(77 * var(--u)) calc(123 * var(--x)) calc(113 * var(--u)); }
.games h2 { margin: 0 0 calc(43 * var(--u)) calc(-8 * var(--u)); font-family: var(--display); font-weight: 900; font-size: calc(56 * var(--u)); line-height: 1; }
.card { position: relative; height: calc(559 * var(--u)); border-radius: calc(40 * var(--u)); overflow: hidden; background: var(--mint) url("assets/tiles-pattern.svg") center / cover no-repeat; }
.card-brand { position: absolute; left: calc(56 * var(--x)); top: calc(96 * var(--u)); }
.app-icon { width: calc(133 * var(--u)); margin-left: calc(14 * var(--u)); border-radius: 22%; }
.wordmark { width: calc(143 * var(--u)); margin-top: calc(31 * var(--u)); }
.card-copy { position: absolute; left: calc(378 * var(--x)); top: calc(153 * var(--u)); width: calc(509 * var(--u)); }
.card-copy p { margin: 0; color: var(--forest); font-size: calc(34.3 * var(--u)); line-height: 1.19; }
.button { display: inline-flex; align-items: center; justify-content: center; margin-top: calc(52 * var(--u)); width: calc(289 * var(--u)); height: calc(71 * var(--u));
  border-radius: calc(18 * var(--u)); background: var(--forest-button); color: #F5FFFE; font-family: var(--display); font-weight: 900; font-size: calc(36 * var(--u)); line-height: 1; }
.button:hover { filter: brightness(1.08); }
.phone { position: absolute; right: 0; top: calc(27 * var(--u)); width: calc(530 * var(--u)); }

/* Footer: 206 tall yellow band. */
.footer { position: relative; height: calc(206 * var(--u)); background: var(--yellow); display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(180 * var(--x)) 0 calc(141 * var(--x)); color: var(--plum-link); }
.footer-cow { width: calc(65 * var(--u)); margin-right: calc(56 * var(--u)); }
.footer-links { display: flex; gap: calc(57 * var(--u)); flex: 1; font-family: var(--display); font-weight: 900; font-size: calc(23.7 * var(--u)); line-height: 1; }
.footer-social { display: flex; align-items: center; gap: calc(41 * var(--u)); }
.footer-social img { height: calc(48 * var(--u)); width: auto; }
.footer-social .appstore img { height: calc(61 * var(--u)); }

/* Phones and small tablets: stack. */
@media (max-width: 960px) {
  :root { --u: 1px; --x: 1px; }
  .nav { height: auto; padding: 16px 20px; flex-wrap: wrap; }
  .logo img { width: 200px; }
  .menu { display: block; width: 44px; height: 44px; border: 0; background: none; padding: 8px; cursor: pointer; }
  .menu span { display: block; height: 4px; margin: 6px 0; border-radius: 2px; background: var(--plum); }
  .links { display: none; width: 100%; flex-direction: column; gap: 14px; padding: 12px 4px 4px; font-size: 26px; }
  .links.open { display: flex; }
  .hero { height: auto; padding: 24px 20px 40px; }
  /* On phones the swoosh becomes a wedge rising to the right under the headline. */
  .swoosh { top: auto; bottom: 0; left: 0; width: 100%; height: 42%; object-fit: cover; object-position: 100% 38%; }
  .cow { position: relative; left: 0; width: 70%; max-width: 320px; margin: 0 auto; }
  .hero h1 { position: relative; left: 0; top: 0; width: auto; margin-top: 16px; font-size: clamp(34px, 9vw, 46px); }
  .games { padding: 40px 20px 48px; }
  .games h2 { font-size: 40px; margin-left: 0; }
  .card { height: auto; padding: 28px 24px 0; border-radius: 28px; display: flex; flex-direction: column; gap: 20px; }
  .card-brand, .card-copy, .phone { position: static; width: auto; }
  .card-brand { display: flex; align-items: center; gap: 16px; }
  .app-icon { width: 72px; margin: 0; }
  .wordmark { width: 90px; margin: 0; }
  .card-copy p { font-size: 22px; }
  .button { width: 100%; max-width: 289px; height: 60px; margin-top: 20px; font-size: 28px; border-radius: 16px; }
  .phone { width: 100%; max-width: 420px; margin: 8px auto 0; }
  .footer { height: auto; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 24px; }
  .footer-cow { width: 56px; margin: 0; }
  .footer-links { flex-direction: column; gap: 12px; font-size: 22px; }
  .footer-social { gap: 24px; }
  .footer-social img { height: 40px; }
  .footer-social .appstore img { height: 48px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }