/* "Normies" site: a static rebuild of the original Wix site, same content, colours, order and typefaces. */

/* Lulo Clean is the original site's display face. It is loaded from Wix's own font server rather than
   copied into this site, because it is a commercial font licensed through Wix. */
@font-face { font-family: "Lulo Clean"; src: url("https://static.parastorage.com/fonts/v2/e3cf8f7e-35c4-446f-9b93-de93e989f66f/v1/lulo-clean-w01-one-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../assets/fonts/poppins-extralight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --blue: #3d9be9;
  --purple: #620674;
  --grey: #d2d2d2;
  --charcoal: #2f2e2e;
  --lulo: "Lulo Clean", "Space Grotesk", "Arial Black", sans-serif;
  --light: "Poppins", "Space Grotesk", sans-serif;
  --hdr: 58px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--hdr); }
body { margin: 0; color: #000; background: #fff; font: 200 16px/1.5 var(--light); }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.lulo { font-family: var(--lulo); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
/* the original marks key lines with a coloured block behind the text */
.hl { background: var(--blue); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 .25em; }
.hl-purple { background: var(--purple); color: #fff; }

/* header */
.c-header { position: sticky; top: 0; z-index: 20; height: var(--hdr); display: flex; align-items: center; gap: 4vw; padding: 0 3vw; background: rgba(236, 236, 236, .94); }
.c-logo { flex: none; width: 42px; height: 42px; border-radius: 50%; background: #000; color: #fff; display: grid; place-items: center; font: 700 16px "Space Grotesk", sans-serif; text-decoration: none; }
.c-nav { display: flex; flex: 1; justify-content: space-evenly; max-width: 900px; }
.c-nav a { font: 700 clamp(11px, 1.55vw, 20px) var(--lulo); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 16px 1.2vw 12px; border-top: 3px solid #555; }
.c-nav a:hover, .c-nav a[aria-current="page"] { border-top-color: #000; background: rgba(0, 0, 0, .06); }

/* hero */
.c-hero { position: relative; height: min(63.4vw, 812px); min-height: 320px; background: url("../assets/images/web/studio-mic.jpg") center / cover no-repeat; }
.c-hero-text { position: absolute; left: 3vw; top: 13%; text-align: center; }
.c-hero h1 { font: 700 clamp(15px, 2vw, 25px) var(--lulo); letter-spacing: .16em; text-transform: uppercase; }
.c-hero p { margin-top: 1.6em; font: 700 clamp(8px, 1vw, 13px) var(--lulo); letter-spacing: .14em; text-transform: uppercase; }

/* intro + Ms. Marvel */
.c-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 3vw; align-items: center; padding: 40px 3vw 48px; background: url("../assets/images/web/extra-1.jpg") 0 0 / 420px auto repeat; }
.c-intro .lulo { font-size: clamp(12px, 1.4vw, 18px); line-height: 1.75; text-align: center; }
.c-intro .welcome { margin-bottom: 2.4em; }
.c-clip h2 { font-size: clamp(12px, 1.5vw, 20px); margin-bottom: 14px; text-align: left; }
.c-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.c-video video, .c-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.c-video button {
  position: absolute; inset: 0; width: 100%; border: 0; cursor: pointer; background: #111 center / cover no-repeat; display: grid; place-items: center;
}
.c-video button::after { content: "\25B6"; width: 64px; height: 64px; display: grid; place-items: center; padding-left: 5px; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: 24px; border: 2px solid #fff; }
.c-video button:hover::after { background: #000; }

/* studios */
.c-studios { background: #000; color: #fff; padding: 22px 3vw 40px; text-align: center; }
.c-studios h2 { font-size: clamp(11px, 1.25vw, 16px); margin-bottom: 26px; }
.c-row { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 18px 3vw; }
.c-studios .c-row { flex-wrap: nowrap; }
.c-studios a { flex: 1 1 0; min-width: 0; display: grid; place-items: center; }
.c-studios img { width: 100%; max-width: 210px; height: clamp(60px, 11vw, 150px); object-fit: contain; }

/* Riica */
.c-riica { display: grid; grid-template-columns: 1fr 1fr; gap: 4vw; align-items: start; padding: 28px 3vw 40px 0; }
.c-riica h2 { font-size: clamp(11px, 1.4vw, 18px); margin-bottom: 14px; }
.c-riica .released { padding-left: 5vw; margin: 34px 0 28px; }
.c-riica .c-video { max-width: 520px; }

.c-wide { width: 100%; height: min(52vw, 660px); object-fit: cover; }
.c-profile { background: #fff; }
.c-profile img { margin: 0 auto; width: min(100%, 1066px); }

/* about */
.c-about { position: relative; padding: 80px 24px 78px; text-align: center; background: url("../assets/images/web/about.jpg") center 35% / cover no-repeat; }
.c-about::before, .c-contact::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, .62); }
.c-about > *, .c-contact > * { position: relative; }
.c-about h2 { font-size: clamp(24px, 3vw, 39px); margin-bottom: 60px; }
.c-about p { max-width: 700px; margin: 0 auto; font-size: clamp(10px, 1.17vw, 15px); line-height: 1.6; letter-spacing: .1em; }

/* contact */
.c-contact { position: relative; padding: 44px 24px 54px; text-align: center; background: url("../assets/images/web/extra-2.jpg") center / 560px auto repeat-x; }
.c-contact::before { background: rgba(255, 255, 255, .72); }
.c-contact h2 { font-size: clamp(20px, 2.4vw, 30px); margin-bottom: 52px; }
.c-contact h3 { font-size: clamp(16px, 2vw, 25px); margin-bottom: 30px; letter-spacing: .14em; }
.c-contact p { font-size: clamp(16px, 1.7vw, 22px); line-height: 1.4; }
.c-contact .name { font-family: "Space Grotesk", sans-serif; font-weight: 400; }

/* project form */
.c-project { position: relative; padding: 36px 0 34px; background: #fff url("../assets/images/web/game-another-eden-2.jpg") center / cover no-repeat; }
.c-project h2 { display: inline-block; font-size: clamp(16px, 2.1vw, 27px); padding: 2px 12px; margin-bottom: 30px; }
.c-form { width: min(296px, 86vw); background: #fff; padding: 22px 16px 26px; display: grid; gap: 14px; }
.c-form label { display: grid; gap: 6px; font-size: 14px; }
.c-form input, .c-form textarea { font: 200 15px var(--light); padding: 9px; border: 1px solid #000; background: #fff; width: 100%; }
.c-form textarea { resize: vertical; min-height: 74px; }
.c-form button { font: 200 16px var(--light); color: #fff; background: var(--purple); border: 0; padding: 11px; cursor: pointer; }
.c-form button:hover { background: #7d1493; }
.c-project .credits { margin: 60px 0 0 8px; font-size: clamp(10px, 1.4vw, 18px); line-height: 1.7; }

/* work: reels + Praxis */
.c-work { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3vw; align-items: start; min-height: min(52vw, 660px); padding: 80px 0 60px; background: url("../assets/images/web/game-xenoblade.png") center / cover no-repeat; }
.c-reels { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; justify-items: start; }
.c-reels button {
  display: flex; align-items: center; gap: 14px; min-width: min(257px, 30vw); padding: 10px 16px 10px 18px; cursor: pointer; text-align: left;
  font: 700 clamp(8px, .9vw, 11px) var(--lulo); letter-spacing: .12em; text-transform: uppercase; color: #000; background: rgba(255, 255, 255, .28); border: 1px solid #000;
}
.c-reels button::before { content: "\25B6"; font-size: 15px; width: 16px; }
.c-reels button.playing::before { content: "\275A\275A"; font-size: 12px; }
.c-reels button:hover, .c-reels button.playing { background: rgba(255, 255, 255, .8); }
.c-work .c-clip { grid-column: 3; padding-right: 0; }
.c-work .c-clip h2 { font-size: clamp(10px, 1.4vw, 18px); margin-bottom: 18px; }

/* clients */
.c-clients { background: var(--grey); padding: 76px 3vw 30px; text-align: center; }
.c-clients h2 { font-size: clamp(15px, 2.1vw, 27px); margin-bottom: 50px; letter-spacing: .12em; }
.c-clients .c-row { gap: 6px 2.2vw; justify-content: center; }
.c-clients img { height: clamp(64px, 9.5vw, 128px); width: auto; max-width: 240px; object-fit: contain; }

.c-footer { background: var(--charcoal); color: #fff; text-align: center; padding: 22px 16px; font-size: 14px; }
.c-footer a { opacity: .75; margin-left: 14px; }

/* writing page */
.c-writing { display: grid; grid-template-columns: 1fr 1fr; gap: 5vw; align-items: center; max-width: 1100px; margin: 0 auto; padding: 60px 4vw 80px; min-height: calc(100vh - var(--hdr) - 66px); }
.c-writing h1 { font-size: clamp(22px, 3vw, 34px); letter-spacing: .14em; margin-bottom: 34px; text-align: center; }
.c-writing p { font: 400 16px/1.6 "Space Grotesk", sans-serif; }
.c-writing p + p { margin-top: 22px; }

@media (max-width: 760px) {
  .c-header { gap: 10px; padding: 0 10px; }
  .c-logo { width: 34px; height: 34px; font-size: 13px; }
  .c-nav a { font-size: 9px; padding: 14px 4px 10px; letter-spacing: .04em; }
  .c-intro, .c-riica, .c-work, .c-writing { grid-template-columns: 1fr; }
  .c-intro { padding: 28px 16px 36px; gap: 28px; }
  .c-intro .lulo { font-size: 11px; }
  .c-riica { padding: 20px 16px 32px; }
  .c-riica .released { padding-left: 0; margin: 10px 0 18px; }
  .c-work { padding: 36px 16px 40px; gap: 34px; background-position: 30% center; }
  .c-work .c-clip { grid-column: auto; }
  .c-reels { gap: 16px; }
  .c-reels button { min-width: 230px; font-size: 9px; }
  .c-project { padding: 24px 16px; }
  .c-project .credits { margin: 28px 0 0; }
  .c-about { padding: 48px 16px; }
  .c-about h2 { margin-bottom: 30px; }
  .c-about p { font-size: 10px; }
}