/* =========================================================
   javisanjuan.com
   Design tokens first: change --accent here and every accent
   surface, tint, focus ring and eyebrow follows.
   The page is dark ("Night"): --paper is the darkest surface
   and --ink is the light text colour.
   ========================================================= */

:root {
  color-scheme: dark;

  --paper: #0F0D1D;
  --card: #1A1830;
  --band: #1C1936;
  --ink: #F2F0FA;
  --muted: #A7A3C0;
  --line: #2C2946;
  --accent: #FFC83D;
  --on-accent: #17142E;
  --on-light: #17142E;
  --accent-tint: color-mix(in srgb, var(--accent) 40%, #FFFFFF);
  --placeholder: #242140;
  --shadow: 0 12px 30px rgba(0, 0, 0, 0.35);

  --font-display: 'Changa One', system-ui, sans-serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-card: 20px;
  --radius-band: 40px;
  --radius-pill: 999px;

  --page-max: 1440px;
  --gutter: clamp(20px, 6.67vw, 96px);
  --band-inset: clamp(12px, 4.45vw, 64px);
  --band-pad: clamp(24px, 4.45vw, 64px);
  --section-space: clamp(72px, 8.33vw, 120px);
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.band-dark :focus-visible { outline-color: #FFFFFF; }
.band-accent :focus-visible { outline-color: var(--on-accent); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 12px 18px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { top: 16px; }

/* Icons are symbols in the inline sprite at the top of <body>, drawn with the text colour. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-lg { width: 20px; height: 20px; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.btn:hover { opacity: 0.85; }

.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-light { background: #FFFFFF; color: var(--on-light); }
/* Outline in the text colour of whatever surface the button sits on. */
.btn-ghost { border-color: color-mix(in srgb, currentColor 45%, transparent); }

/* The header's "Let's talk": an ink-coloured pill (light on this dark page). */
.btn-dark {
  min-height: 44px;
  padding: 0 20px;
  background: var(--ink);
  color: var(--paper);
  font-size: 16px;
}

.band .btn { padding: 0 24px; font-size: 16px; }
.band .btn-lg { min-height: 60px; font-size: 18px; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 28px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 28px;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  text-decoration: none;
}

.nav-link:hover { opacity: 0.85; }

.menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
  padding-block: 40px 96px;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: 15px;
  font-weight: 700;
}

.badge::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.hero h1 {
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.01em;
}

.hero-intro {
  max-width: 580px;
  font-size: clamp(18px, 1.46vw, 21px);
  line-height: 1.55;
  color: var(--muted);
}

/* The portrait sits on a tilted accent card, offset down and to the right. */
.hero-visual {
  position: relative;
  width: 81.5%;
  margin-block: 20px 40px;
  margin-left: 12%;
}

.hero-visual::before {
  content: "";
  position: absolute;
  left: 7.8%;
  top: 3.4%;
  width: 100%;
  height: 96.6%;
  border-radius: var(--radius-band);
  background: var(--accent);
  transform: rotate(4deg);
}

.portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 36px;
  background: var(--placeholder);
}

.portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.now-card {
  position: absolute;
  left: -10.4%;
  bottom: -1%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.now-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.now-name {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
}

/* ---------- Previously at ---------- */

.studios {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 48px;
  padding-block: 28px;
  border-block: 1px solid var(--line);
}

.studios-label {
  flex: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.studio-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px 48px;
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.2;
  opacity: 0.7;
}

/* ---------- Bands (Tokitopia, contact) ---------- */

.band {
  width: calc(100% - 2 * var(--band-inset));
  max-width: calc(var(--page-max) - 128px);
  margin-inline: auto;
  border-radius: var(--radius-band);
}

.band h2 {
  font-size: clamp(46px, 5vw, 72px);
  line-height: 1;
}

.band-dark {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 56px;
  align-items: center;
  margin-top: 96px;
  padding: clamp(40px, 5.56vw, 80px) var(--band-pad);
  background: var(--band);
  color: #FFFFFF;
}

.band-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.band-dark .eyebrow { color: var(--accent-tint); }

.band-lede {
  font-size: clamp(18px, 1.39vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.bullets {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.9);
}

.bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bullets li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-tint);
}

.band-copy .actions { gap: 12px; margin-top: 8px; }

/* Store screenshots: the middle one is larger, all share the 9:16 Google Play ratio. */
.shots {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.shot {
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.08);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-main { background: rgba(255, 255, 255, 0.12); }

.band-accent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-top: var(--section-space);
  padding: clamp(48px, 6.11vw, 88px) var(--band-pad);
  background: var(--accent);
  color: var(--on-accent);
}

.contact-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 700px;
}

.contact-copy p {
  font-size: clamp(18px, 1.39vw, 20px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--on-accent) 85%, transparent);
}

.contact-actions {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 12px;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Sections ---------- */

.section { padding-top: var(--section-space); }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: 40px;
}

.section-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.section-title h2 {
  font-size: clamp(38px, 3.9vw, 56px);
  line-height: 1.05;
}

.section-lede {
  max-width: 420px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---------- Games ---------- */

.games-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.game-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
}

/* The store icon sits in the middle of the art box, on an enlarged, blurred
   copy of itself; the game's colour shows until the icon loads. */
.game-art {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background: var(--placeholder);
}

.game-icon {
  width: 45%;
  border-radius: 22%;
  box-shadow: 0 10px 24px rgba(22, 21, 26, 0.2);
}

/* The blur is in cqi (1% of the box's width) so it reads the same at every card
   size. The copy overhangs the box by more than the blur spreads, so its soft
   edges stay out of sight. */
.game-blur {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 150%;
  max-width: none;
  transform: translate(-50%, -50%);
  filter: blur(10cqi);
}

.game-art.is-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border: 2px dashed rgba(22, 21, 26, 0.25);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

.game-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 4px 4px;
}

.game-title {
  font-size: 24px;
  line-height: 1.15;
}

.game-meta {
  font-size: 15px;
  color: var(--muted);
}

.chip {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-size: 15px;
  font-weight: 600;
}

.chip-role {
  margin-top: 8px;
  padding: 5px 12px;
  background: var(--paper);
  font-size: 13px;
  font-weight: 700;
}

/* Store links sit at the bottom of the card, so they line up across a row. */
.game-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: auto;
  padding-top: 6px;
}

.game-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.game-link:hover { opacity: 0.85; }

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 80px;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.about-copy > p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.timeline { border-bottom: 1px solid var(--line); }

.timeline li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 220px;
  gap: 24px;
  align-items: baseline;
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.when {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.role {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}

.where {
  font-size: 17px;
  color: var(--muted);
  text-align: right;
}

/* ---------- Writing ---------- */

.writing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 220px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.post-card:hover { opacity: 0.85; }

.post-tag {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.post-card h3 {
  font-size: 26px;
  line-height: 1.15;
}

.post-summary {
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
}

.post-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-size: 15px;
  font-weight: 700;
}

/* ---------- Footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 48px;
  font-size: 15px;
  color: var(--muted);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* ---------- Star (scripts/star.js) ---------- */

/* The star and its trail fly in a layer as big as the page, which clips them,
   so they float over everything without moving anything or widening the page.
   The layer sits under the phone menu (z-index 5). */
body { position: relative; }

.star-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

/* Placed, sized and scaled by star.js; hidden until it has its first spot. */
.star {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  will-change: transform;
}

.star.is-ready { opacity: 1; }

/* Bobs up and down; star.js sets its tilt. */
.star-bob {
  position: relative;
  height: 100%;
  animation: star-bob 1.6s ease-in-out infinite alternate;
}

.star-bob img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The lines only show when they blink, after a flight. */
.star-lines { opacity: 0; }

/* The trail's dashes: star.js sizes, places and fades each one. */
.star-dash {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
  background: #FFFFFF;
}

@keyframes star-bob {
  from { translate: 0 4%; }
  to { translate: 0 -4%; }
}

/* =========================================================
   Responsive
   ========================================================= */

/* Tablet and small laptops */
@media (max-width: 1023px) {
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .band-dark { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .shots { max-width: 640px; }

  .about { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .timeline li { grid-template-columns: 130px minmax(0, 1fr) auto; }

  .band-accent { flex-direction: column; align-items: flex-start; }
}

/* Hero stacks: text first, portrait below */
@media (max-width: 959px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-bottom: 72px;
  }

  .hero-visual {
    width: min(72%, 400px);
    margin: 8px auto 24px;
  }

  .now-card { left: -8%; }

  .studios { flex-direction: column; align-items: flex-start; }
  .studio-list { justify-content: flex-start; gap: 8px 32px; }

  .writing-grid { grid-template-columns: minmax(0, 1fr); }
  .post-card { min-height: 0; }
}

/* Phones */
@media (max-width: 767px) {
  .js .menu-toggle { display: inline-flex; }

  .js .nav {
    display: none;
    position: absolute;
    top: calc(100% - 12px);
    right: var(--gutter);
    left: var(--gutter);
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow);
  }

  .js .nav.is-open { display: flex; }
  .js .nav-link { padding: 0 12px; }
  .js .nav .btn-dark { margin-top: 8px; }

  .no-js .nav { flex-wrap: wrap; gap: 4px 20px; }
  .no-js .site-header { flex-wrap: wrap; }

  .wordmark { font-size: 24px; }

  .studio-list { font-size: 22px; gap: 6px 24px; }

  /* Screenshots become a swipeable row */
  .shots {
    display: flex;
    gap: 16px;
    max-width: none;
    margin-inline: calc(-1 * var(--band-pad));
    padding: 4px var(--band-pad) 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--band-pad);
    overscroll-behavior-x: contain;
  }

  .shot {
    flex: 0 0 58%;
    scroll-snap-align: start;
  }

  .shot-main { flex-basis: 64%; }

  .contact-actions { width: 100%; }
  .band .btn-lg { width: 100%; }

  .timeline li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding-block: 18px;
  }

  .where { text-align: left; }
}

@media (max-width: 599px) {
  .games-grid { grid-template-columns: minmax(0, 1fr); }

  /* One card per row: a wider, shorter art box keeps each card from filling
     the screen. The icon keeps the same share of the box's height. */
  .game-art { aspect-ratio: 2 / 1; }
  .game-icon { width: 30%; }
}

/* Small phones: buttons fill their row instead of wrapping ragged,
   and the badge wraps to two lines, so it gets a softer corner. */
@media (max-width: 480px) {
  .actions .btn,
  .contact-social .btn { flex: 1 1 auto; }

  .badge { border-radius: 18px; }

  /* A smaller card, hanging lower, so it covers less of the smaller portrait. */
  .now-card { bottom: -5%; padding: 12px 16px; }
  .now-label { font-size: 12px; }
  .now-name { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .post-card { transition: none; }
  .star-bob { animation: none; }
}