/*
  Anomaly Lab page (template app/Templates/anomaly-lab), linked after the theme stylesheet on every page of the project.
  Design: design/mara-games.pen, frames YIcdv (desktop 1440) and vgWHB (mobile 390). The theme sets the background, surface,
  text and accent colours and the fonts (Share Tech Mono headings, Inter text); this file adds the secondary colours of the
  design, sets the mono type in mixed case and lays out the sections of the template view.
  Sections: tokens, type, header, hero, facts, the app, tiles, modules, gallery, user guide, news, call to action.
*/

/* ---------- Tokens (Pencil variables al-text-2, al-muted, al-line, al-accent-hover) ---------- */

:root {
  --color-text-2: #b3c0c0;
  --color-muted: #7f9090;
  --color-border: #243033;
  --color-accent-hover: #26b88a;
  --al-outline: rgb(29 158 117 / 35%);
  --al-glow: rgb(29 158 117 / 19%);
}

/* ---------- Type: the mono face has one weight and the design writes it in mixed case ---------- */

.ms h1,
.ms h2,
.ms h3,
.ms .h1,
.ms .h2,
.ms .h3,
.ms .btn,
.ms-wordmark,
.ms .site-nav__label,
.ms-more {
  font-weight: 400;
  text-transform: none;
}

.ms h2,
.ms .h2 {
  line-height: 1.1;
}

/* Running text in Inter Light. */
.ms main {
  font-weight: 300;
}

.ms-eyebrow {
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 400;
}

.ms-title {
  font-size: 2.25rem;
}

.ms-intro {
  max-width: 700px;
  font-size: 1rem;
  line-height: 1.65;
}

.ms-prose {
  font-size: 1rem;
}

@media (min-width: 900px) {
  .ms-eyebrow {
    margin-bottom: 18px;
    font-size: 0.9375rem;
  }

  .ms-title {
    font-size: 3.5rem;
  }

  .ms-intro,
  .ms-prose {
    font-size: 1.0625rem;
  }
}

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

.ms-wordmark {
  letter-spacing: 1px;
}

@media (min-width: 900px) {
  .ms-wordmark {
    font-size: 1.75rem;
    letter-spacing: 2px;
  }

  .ms .site-nav__label,
  .ms .site-nav a:hover .site-nav__label,
  .ms .site-nav a[aria-current] .site-nav__label {
    font-weight: 400;
  }

  .ms .ms-cta {
    font-weight: 400;
  }
}

/* ---------- Hero: key art behind the text on wide screens, under it on phones ---------- */

/* Dark under the text (the left 55 %, where the key art is empty), lighter over the phones and a fade into the page at the
   bottom. Text and accent keep 4.5:1 even over a white pixel in the text part; tools/a11y-check.php reads these stops and the
   region of the manifest (hero_text_region). */
.ms-hero__media::after {
  background: linear-gradient(90deg, rgb(11 15 16 / 95%) 0%, rgb(11 15 16 / 92%) 55%, rgb(11 15 16 / 35%) 100%);
  background:
    linear-gradient(180deg, transparent 0%, transparent 70%, var(--color-bg) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 95%, transparent) 0%, color-mix(in srgb, var(--color-bg) 92%, transparent) 55%, color-mix(in srgb, var(--color-bg) 35%, transparent) 100%);
}

.ms-hero__label {
  margin-bottom: 4px;
}

/* The eyebrow is plain accent text here, not a filled badge. */
.ms-hero__label .badge {
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--color-accent);
  font-family: var(--font-heading, var(--font-mono));
  font-size: 0.8125rem;
  letter-spacing: 3px;
}

.ms-hero__name {
  font-size: 3.5rem;
  line-height: 1;
}

.ms-hero__subtitle {
  max-width: none;
  margin-top: 16px;
  color: var(--color-accent);
  font-family: var(--font-heading, var(--font-mono));
  font-size: 1.25rem;
  line-height: 1.35;
}

.ms-hero__lead {
  max-width: 640px;
  margin-top: 20px;
  font-size: 1rem;
  line-height: 1.6;
}

.ms-hero__note {
  max-width: 240px;
  margin-top: 20px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.ms-hero .btn-row {
  width: auto;
  margin-top: 32px;
}

/* Official Google Play badge at the design size (189 x 73 on phones, 202 x 78 on wide screens, clear space included). */
.ms .store-badge--google img {
  height: 73px;
  margin-block: -10px;
}

/* Phones: the key art is a band under the text, anchored right so the phones stay in view. */
@media (max-width: 899.98px) {
  .ms-hero {
    display: flex;
    flex-direction: column;
  }

  .ms-hero__inner {
    padding-top: calc(var(--header-h) + 20px);
    padding-bottom: 0;
  }

  .ms-hero__media {
    position: relative;
    inset: auto;
    z-index: 0;
    order: 1;
    height: 320px;
    overflow: hidden;
  }

  .ms-hero__img {
    position: absolute;
    right: 0;
    bottom: -44px;
    width: 198%;
    max-width: none;
    height: auto;
  }

  /* No text over the picture on phones: only the fades into the page above and below. */
  .ms-hero__media::after {
    background: linear-gradient(180deg, var(--color-bg) 0%, transparent 30%, transparent 75%, var(--color-bg) 100%);
  }
}

@media (min-width: 900px) {
  .ms-hero {
    min-height: 760px;
  }

  /* Badge and its note side by side under the lead. The text keeps to the left 55 % of the hero, the part of the key art the
     overlay darkens (manifest hero_text_region, tests/AnomalyLabTest.php checks both together); the title shrinks with the
     window so that it fits there. Up to the wrap width that is 45 % of the hero; on wider screens the wrap is centred, so the
     padding is the wrap half plus its gutter minus 5vw (648px at 1440, 624px at 1920, 592px at 2560). */
  .ms-hero__inner {
    padding-right: min(45%, calc(var(--wrap) / 2 + var(--gutter) - 5vw));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: 26px;
  }

  .ms-hero__inner > * {
    grid-column: 1 / -1;
  }

  .ms-hero__inner > .btn-row {
    grid-column: 1;
    margin-top: 36px;
  }

  .ms-hero__inner > .ms-hero__note {
    grid-column: 2;
    margin-top: 36px;
  }

  .ms-hero__label .badge {
    font-size: 0.9375rem;
  }

  .ms-hero__name {
    font-size: min(7rem, 7.8vw);
  }

  .ms-hero__subtitle {
    margin-top: 24px;
    font-size: 1.75rem;
  }

  .ms-hero__lead {
    margin-top: 24px;
    font-size: 1.1875rem;
    line-height: 1.58;
  }

  .ms .store-badge--google img {
    height: 78px;
    margin-block: -11px;
  }
}

/* ---------- Facts ---------- */

.ms-facts {
  border-top: 1px solid var(--color-border);
  border-bottom: 0;
}

.ms-facts__list {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
}

.ms-facts__value {
  font-size: 1.4375rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
}

.ms-facts__label {
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 2px;
}

@media (min-width: 900px) {
  .ms-facts__list {
    flex-wrap: nowrap;
    padding-block: 36px;
  }

  .ms-facts__value {
    font-size: 2.25rem;
    line-height: 1.2;
  }

  .ms-facts__label {
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 3px;
  }

  .ms-facts__item {
    gap: 6px;
  }
}

/* ---------- The app: two paragraphs and the boundary sentence with an accent rule ---------- */

.ms-text .ms-prose {
  max-width: 760px;
}

.ms-prose blockquote {
  margin: 28px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-heading, var(--font-mono));
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 1px;
}

@media (min-width: 900px) {
  .ms-prose blockquote {
    font-size: 1.0625rem;
  }
}

/* ---------- Tiles: dark boxes on the surface band; one column of horizontal tiles on phones ---------- */

.ms-tiles__list {
  grid-template-columns: minmax(0, 1fr);
}

.ms-tile {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 20px;
  align-content: start;
  border-color: var(--color-border);
  border-radius: 0;
  background: var(--color-bg);
}

.ms-tile .ms-icon {
  grid-row: 1 / span 2;
  margin-bottom: 0;
}

.ms-tile__title {
  font-size: 1.25rem;
}

.ms-tile__text {
  margin-top: 8px;
}

@media (min-width: 900px) {
  /* Four tiles a row; a shorter last row is stretched over the full width (4 + 3 in the design). */
  .ms-tiles__list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .ms-tile {
    display: block;
    grid-column: span 3;
    min-height: 192px;
  }

  .ms-tile:nth-child(4n + 1):nth-last-child(3),
  .ms-tile:nth-child(4n + 1):nth-last-child(3) ~ .ms-tile {
    grid-column: span 4;
  }

  .ms-tile:nth-child(4n + 1):nth-last-child(2),
  .ms-tile:nth-child(4n + 1):nth-last-child(2) ~ .ms-tile {
    grid-column: span 6;
  }

  .ms-tile:nth-child(4n + 1):last-child {
    grid-column: span 12;
  }

  .ms-tile .ms-icon {
    margin-bottom: 16px;
  }

  .ms-tile__title {
    font-size: 1.625rem;
  }

  .ms-tile__text {
    margin-top: 14px;
  }
}

/* ---------- Modules: phone screenshots with an outline and a soft glow, alternating sides ---------- */

.al-modules .ms-split {
  padding-block: 48px;
}

.al-modules .ms-split__inner {
  gap: 40px;
}

.al-modules .ms-split__media--portrait {
  background: radial-gradient(270px 300px at 50% 50%, var(--al-glow), transparent);
}

.al-modules .ms-split__img--portrait {
  border: 1px solid var(--al-outline);
  border-radius: 18px;
}

/* Text-only modules (spirit box, noise generator) sit on the surface band, divided by a line. */
.al-modules .ms-text {
  padding-block: 48px;
  background: var(--color-surface);
}

.al-modules .ms-text + .ms-text {
  border-top: 1px solid var(--color-border);
}

@media (min-width: 900px) {
  .al-modules .ms-split {
    padding-block: 112px;
  }

  .al-modules .ms-split--image-right .ms-split__inner,
  .al-modules .ms-split--image-left .ms-split__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
  }

  .al-modules .ms-title {
    font-size: 2.75rem;
  }

  .al-modules .ms-text {
    padding-block: 64px;
  }
}

/* ---------- Gallery: the two landscape analysis captures, whole ---------- */

.ms-gallery .ms-gallery__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}

.ms-gallery .shot {
  aspect-ratio: auto;
  border-color: var(--color-border);
  border-radius: 8px;
}

.ms-gallery .shot img {
  height: auto;
}

@media (min-width: 900px) {
  .ms-gallery .ms-gallery__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* ---------- User guide ---------- */

.ms-downloads {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ms-downloads__list {
  max-width: 760px;
}

.ms-downloads .downloads__list li {
  min-height: 72px;
}

.ms-downloads .downloads__link {
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
}

.ms-downloads .downloads__list .label {
  font-family: var(--font-heading, var(--font-mono));
  letter-spacing: 3px;
}

/* ---------- News and call to action ---------- */

.ms-more {
  letter-spacing: 2px;
}

.ms-cta-band {
  font-weight: 400;
}

.ms-cta-band__title {
  font-size: 4rem;
  line-height: 1.1;
}

.ms-cta-band__text {
  max-width: 620px;
  margin-top: 28px;
  font-size: 1rem;
  line-height: 1.6;
}

.ms-cta-band__note {
  margin-top: 28px;
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  .ms-cta-band__title {
    font-size: 5.5rem;
  }

  .ms-cta-band__text {
    font-size: 1.125rem;
  }

  .ms-cta-band__note {
    font-size: 0.9375rem;
  }
}

/* The menu links to the sections by their titles; the eyebrow above the title stays in view. */
#instruments,
#guide {
  scroll-margin-top: 64px;
}