/* Angry Badger Studios studio page.
   The logo's red, black and white on a spray-painted dark gray wall: a gray
   gradient, a fine grain tile, and black spray spatter with drips. Saira for
   headings and buttons, Barlow for text. No framework, no build step, no
   JavaScript. */

@font-face { font-family: "Saira"; font-weight: 100 900; font-stretch: 50% 125%; font-style: normal; font-display: swap; src: url("../fonts/Saira.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Barlow-Medium.woff2") format("woff2"); }

:root {
  /* The logo's red, sampled from Logo V2 in the Angry Badger Studios Figma file. */
  --red: #ca372b;
  --red-hot: #e0402f;
  --page-top: #313135;
  --page-bottom: #141416;
  --text: #f3f3f3;
  --muted: #a7a7ad;
  --line: rgba(255, 255, 255, 0.08);
  --font-head: "Saira", "Segoe UI", system-ui, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --gutter: 16px;
  --wide: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--text); font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  /* One background for the whole page, so no section has an edge. Layers, top
     to bottom: black paint spatter scattered down the page, a grain tile, a
     dark glow behind the logo that makes it stand out, and a top-to-bottom fade
     from dark gray to near black. The radial gradient is placed in pixels from
     the top, so it stays behind the logo however long the page is. The
     spatter is generated by a script with a fixed seed, so it is the same on
     every visit. */
  background-color: var(--page-bottom);
  background-image:
    url("../img/spatter.svg"),
    url("../img/grain.svg"),
    radial-gradient(ellipse 900px 720px at 50% 400px, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(var(--page-top) 0px, #242427 700px, var(--page-bottom) 1500px);
  background-size: max(1600px, 100%) auto, 220px 220px, auto, auto;
  background-position: center top, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, no-repeat, no-repeat;
  overflow-x: hidden;
}
main { flex: 1; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.wrap { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- Button ----------
   One style for every call to action: solid logo red, square-cornered caps. */
.button {
  display: inline-block;
  padding: 13px 34px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head); font-weight: 650; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  border-radius: 2px;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.button:hover { background: var(--red-hot); transform: translateY(-1px); }
.button:active { transform: translateY(0); }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ---------- Header ----------
   Pinned to the top. A see-through dark glass over the page background, with
   a faint line and a soft shadow below it in place of a hard border. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  background: rgba(17, 17, 19, 0.78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
}
.header-row { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.header-logo img { width: 60px; height: auto; }
.site-nav { display: flex; gap: 32px; }
.site-nav a {
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--text);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { border-bottom-color: var(--red); }

/* ---------- Hero ----------
   Sized so the logo lands in the dark glow of the page background. */
.hero {
  position: relative; isolation: isolate;
  /* The sprayed glow below is wider than a phone screen; clip it sideways
     only, so it still fades out freely above and below the hero. */
  overflow-x: clip;
  display: grid; place-items: center;
  min-height: min(82vh, 780px);
  padding-block: 32px 64px;
  text-align: center;
}
/* Black spray-paint mist over the dark glow, so the glow reads as paint and
   not a smooth shadow. A speckle tile, faded out from the logo by a radial
   mask so it has no edge. Centered a little above the middle of the hero,
   where the logo sits. */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: 1100px; height: 860px;
  transform: translate(-50%, calc(-50% - 70px));
  background: url("../img/spray.svg") 0 0 / 360px 360px;
  -webkit-mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 0%, rgba(0, 0, 0, 0.8) 35%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
}
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.hero-logo { margin: 0; }
.hero-logo img {
  width: min(500px, 82vw);
  filter: drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
}
.hero-line {
  margin: 22px 0 30px;
  font-family: var(--font-head); font-weight: 500; font-size: 20px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* ---------- Projects ----------
   Text on the left, the game's image on the right. On narrow screens the
   image moves between the heading and the text. */
.projects {
  /* Positioned so it paints above the hero's spray mist where the two overlap. */
  position: relative;
  padding-block: 96px 120px;
}
.project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas: "head media" "body media";
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  align-items: start;
}
.project-head {
  grid-area: head;
  margin: 0 0 40px;
  font-family: var(--font-head); font-weight: 600; font-size: 40px; line-height: 1.1;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.project-media {
  grid-area: media; align-self: center;
  position: relative;
  border-radius: 2px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  outline: 1px solid var(--line); outline-offset: -1px;
}
.project-media img { width: 100%; transition: transform 0.4s ease; }
.project-media:hover img { transform: scale(1.03); }
/* A red bar on the image's bottom edge ties it to the logo. */
.project-media::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 34%; height: 4px; background: var(--red);
}
.project-body { grid-area: body; }
.project-body h3 {
  margin: 18px 0 14px;
  font-family: var(--font-head); font-weight: 600; font-size: 28px; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.project-body p { margin: 0 0 16px; color: var(--muted); font-size: 16px; }
.project-body .button { margin-top: 14px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: 3px 9px;
  border: 1px solid var(--red); border-radius: 2px;
  color: var(--red-hot);
  font-family: var(--font-head); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: 26px;
  color: var(--muted); font-size: 14px; text-align: center;
}
.site-footer a { color: var(--text); text-decoration: none; }
.site-footer a:hover { color: var(--red-hot); }
.footer-sep { margin-inline: 10px; color: #4a4a50; }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  .project {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "media" "body";
    grid-template-rows: auto;
  }
  .project-head { margin-bottom: 24px; font-size: 32px; }
  .project-media { margin-bottom: 28px; }
  .projects { padding-block: 72px 88px; }
}
@media (max-width: 560px) {
  .header-row { height: 60px; }
  .header-logo img { width: 50px; }
  .site-nav { gap: 22px; }
  /* Phones get their own spatter, laid out for one narrow column of content.
     The dark glow shrinks to fit behind the smaller logo. */
  body {
    background-image:
      url("../img/spatter-narrow.svg"),
      url("../img/grain.svg"),
      radial-gradient(ellipse 400px 420px at 50% 240px, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.34) 30%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, 0) 100%),
      linear-gradient(var(--page-top) 0px, #242427 500px, var(--page-bottom) 1200px);
    background-size: 100% auto, 220px 220px, auto, auto;
    background-position: center top, 0 0, 0 0, 0 0;
  }
  .hero { min-height: auto; padding-block: 32px 56px; }
  .hero::before { width: 560px; height: 560px; transform: translate(-50%, calc(-50% - 60px)); }
  .hero-line { font-size: 16px; letter-spacing: 0.18em; }
  .button { display: block; width: 100%; text-align: center; }
  .hero-inner .button { width: min(100%, 360px); }
  .site-footer .wrap { display: flex; flex-direction: column; gap: 4px; }
  .footer-sep { display: none; }
}