/*
 * The homepage's own touches, on top of space.css and deep-field.css. The page transition is
 * shared (components/transit.css).
 */
:root {
  --g-accent: #f2c46d;
  --g-on-accent: #1b1405;
  --g-title-a: #f3efe2;
  --g-title-b: #f2c46d;
  --g-signal: #e8c98e;
}
/* the arrival line in the warp, in the page's warm colours rather than pink */
.warp__in { color: #e8c98e; }
/* the form panel: less see-through, so asteroids drifting behind it don't fight the text */
.signal--beacon {
  background:
    radial-gradient(circle at calc(100% - 2.6rem) 2.6rem, rgb(242 196 109 / 0.2), transparent 9rem),
    repeating-radial-gradient(circle at calc(100% - 2.6rem) 2.6rem, transparent 0 38px, color-mix(in srgb, var(--gold) 12%, transparent) 38px 39px),
    rgb(8 11 26 / 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* the intro stops short of the Moon, which sits at 80% across with a radius of 12vmin
   (deep-field.js), less the intro's own left edge and a gap */
@media (min-width: 640px) {
  .intro__text { max-width: min(24ch, calc(80vw - 12vmin - 2.5rem - max(var(--gutter), (100vw - var(--wrap)) / 2))); }
}
/* five links in the nav now (Work and Freelance), so on phones they sit closer */
@media (max-width: 30em) {
  .top__nav { gap: 0.6rem; letter-spacing: 0.04em; font-size: 0.62rem; }
  .top__brand { letter-spacing: 0.08em; font-size: 0.68rem; }
}
/* the countdown's words sit outside its ring (16rem across), above and below, so nothing overlaps */

/* "Open the mission file": outlined, filling with gold on hover (the other way round from .btn) */
.mp-go .btn { background: transparent; color: var(--accent); }
.mp-go .btn:hover, .mp-go .btn:focus-visible { background: var(--accent); color: var(--on-accent); }
/* four targets in the telescope (plusmove.co.uk): four across on tablets */
@media (max-width: 62em) and (min-width: 40.01em) {
  .scope__targets { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* on phones: the name on two lines (Matt / Davies), bigger, and the ISS panel just
   below "Available for freelance work" instead of over the Earth */
@media (max-width: 40em) {
  .hero__name { font-size: 19vw; letter-spacing: 0.08em; line-height: 0.95; }
  .hero__name .bump-word { display: block; }
  .hero .iss { position: relative; left: auto; right: auto; bottom: auto; width: 100%; max-width: 30rem; margin-top: 1.6rem; }
  /* four targets in the telescope (plusmove.co.uk): two by two on phones */
  .scope__targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the Earth at the end sits higher (homeTop in main.js), so the footer lifts clear of it */
  .signoff__base { padding-bottom: calc(3rem + 21vh); }
}