/* Working Questions — a simple, responsive, single-page site.
 *
 * How this file is organised
 * --------------------------
 * 1. Design tokens (:root). Every value that changes with the viewport is a
 *    custom property. The defaults describe phones and tablets (<= 800px).
 * 2. Components. Each rule is written once and reads the tokens.
 * 3. Viewport adjustments. Media queries only reassign tokens (plus a few
 *    structural switches), so there is one place to look for any given size.
 *    Later blocks win over earlier ones, as in any cascade.
 */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  --orange: #ff5527;
  --background: #13001f;

  /* Page frame */
  --gutter: clamp(24px, 5vw, 44px);
  --pad-top: clamp(25px, 5vh, 50px);
  --pad-bottom: clamp(28px, 5vh, 55px);
  --bg-position: 47% center;

  /* Logotype (the negative margin lets the SVG artwork line up with the mockup) */
  --title-width: calc(100vw - 16px);
  --title-margin-left: calc(8px - var(--gutter));

  /* Description */
  --desc-margin-top: clamp(38px, 8vh, 85px);
  --desc-size: clamp(2rem, 5.6vw, 3.1rem);
  --desc-leading: 1.19;
  --desc-tracking: -0.035em;
  --desc-max-width: none;
  --desc-line-display: inline; /* block = one line per span, inline = flowing text */

  /* Footer */
  --footer-gap: 2rem;
  --footer-pad-top: clamp(50px, 9vh, 90px);
  --icon-gap: clamp(16px, 3vw, 26px);
  --icon-size: clamp(46px, 6.7vw, 62px);
  --madi-width: clamp(122px, 19vw, 170px);
}

/* 2. Components --------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  margin: 0;
  color: #fff;
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

.landing {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Fallback for browsers without svh. */
  min-height: 100svh;
  padding: var(--pad-top) var(--gutter) var(--pad-bottom);
  overflow: hidden;
  background-image: url("assets/background.jpg");
  background-size: cover;
  background-position: var(--bg-position);
  background-repeat: no-repeat;
}

.landing__title {
  flex: none;
  width: var(--title-width);
  margin: 0 0 0 var(--title-margin-left);
  line-height: 0;
}

.landing__title img {
  display: block;
  width: 100%;
  height: auto;
}

.landing__description {
  flex: none;
  max-width: var(--desc-max-width);
  margin: var(--desc-margin-top) 0 0;
  color: var(--orange);
  font-size: var(--desc-size);
  font-weight: 700;
  line-height: var(--desc-leading);
  letter-spacing: var(--desc-tracking);
}

.landing__description span {
  display: var(--desc-line-display);
}

.landing__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--footer-gap);
  margin-top: auto;
  padding-top: var(--footer-pad-top);
}

.platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--icon-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.platforms__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 8px;
  transition: transform 150ms ease, opacity 150ms ease;
}

.platforms__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.landing__madi {
  display: block;
  flex: none;
  width: var(--madi-width);
  transition: opacity 150ms ease;
}

.landing__madi img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover only where a real hover exists, so it doesn't stick after a tap. */
@media (hover: hover) {
  .platforms__link:hover {
    transform: translateY(-4px);
    opacity: 0.82;
  }

  .landing__madi:hover {
    opacity: 0.82;
  }
}

.platforms__link:focus-visible,
.landing__madi:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 7px;
}

@media (prefers-reduced-motion: reduce) {
  .platforms__link,
  .landing__madi {
    transition: none;
  }

  .platforms__link:hover {
    transform: none;
  }
}

/* 3. Viewport adjustments ------------------------------------------------ */

/* Desktop (> 800px) ---------------------------------------------------- */
@media (min-width: 801px) {
  :root {
    --gutter: 4.4vw;
    --pad-top: 1.1vw;
    --pad-bottom: 7.35svh;
    --bg-position: center 71.5%;

    /* The width also follows the viewport HEIGHT so the footer stays in view. */
    --title-width: min(97.7vw, 170svh);
    --title-margin-left: calc(1.6vw - var(--gutter));

    --desc-margin-top: -1.2vw;
    --desc-size: clamp(1.4rem, min(2.91vw, 5.3svh), 4.5rem);
    --desc-leading: 1.025;
    --desc-tracking: -0.028em;
    --desc-line-display: block;

    --footer-pad-top: clamp(18px, 3svh, 40px);
    --icon-gap: clamp(16px, 1.55vw, 34px);
    --icon-size: clamp(46px, 3.4vw, 78px);
    --madi-width: clamp(125px, 8.75vw, 190px);
  }

  /* The SoundCloud mark is intentionally a little wider in the reference. */
  .platforms__link--soundcloud {
    margin-left: 11px;
  }

  .platforms__link--soundcloud img {
    transform: scaleX(1.16);
  }
}

/* Short or very wide desktop windows: let the copy flow into fewer lines. */
@media (min-width: 801px) and (max-height: 875px),
       (min-width: 801px) and (min-aspect-ratio: 17/10) {
  :root {
    --pad-bottom: max(20px, 3svh);
    --desc-max-width: min(86vw, 64rem);
    --desc-leading: 1.1;
    --desc-line-display: inline;
    --footer-pad-top: clamp(16px, 2.7svh, 24px);
  }
}

/* Extra-wide desktop: the heading yields a little more height. */
@media (min-width: 801px) and (min-aspect-ratio: 19/10) {
  :root {
    --title-width: min(97.7vw, 155svh);
  }
}

/* Genuinely shallow desktop window: smaller copy and footer artwork. */
@media (min-width: 801px) and (max-height: 550px) {
  :root {
    --pad-bottom: 3svh;
    --desc-size: clamp(1.25rem, min(2.91vw, 5.3svh), 4.5rem);
    --footer-pad-top: clamp(10px, 2svh, 18px);
    --icon-size: min(clamp(46px, 3.4vw, 78px), 9svh);
    --madi-width: min(clamp(125px, 8.75vw, 190px), 31svh);
  }
}

/* Phones (<= 600px) ---------------------------------------------------- */
@media (max-width: 600px) {
  :root {
    --bg-position: 43% center;
    --desc-size: clamp(1.85rem, 7.4vw, 2.7rem);
    --desc-max-width: 18ch;
    --footer-gap: clamp(44px, 8vh, 75px);
    --icon-gap: 10px;
    --icon-size: clamp(45px, 12vw, 58px);
    --madi-width: clamp(135px, 38vw, 175px);
  }

  .landing__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .platforms {
    justify-content: space-between;
  }

  .landing__madi {
    align-self: flex-start;
  }
}

/* Tablet-width screens with less vertical space. */
@media (min-width: 601px) and (max-width: 800px) and (max-height: 740px) {
  :root {
    --pad-top: clamp(16px, 4svh, 35px);
    --pad-bottom: clamp(16px, 4svh, 35px);
    --title-width: min(calc(100vw - 16px), 125svh);
    --desc-margin-top: clamp(20px, 6svh, 40px);
    --desc-size: clamp(1.65rem, min(5.6vw, 6svh), 3.1rem);
    --footer-pad-top: clamp(14px, 3svh, 24px);
  }
}

/* Larger phones in compact, landscape-like viewports. */
@media (min-width: 431px) and (max-width: 600px) and (min-height: 601px) and (max-height: 840px) {
  :root {
    --pad-top: clamp(18px, 3svh, 30px);
    --pad-bottom: clamp(18px, 3svh, 30px);
    --desc-margin-top: clamp(20px, 5svh, 42px);
    --desc-size: clamp(1.65rem, min(7.4vw, 5svh), 2.7rem);
    --footer-gap: clamp(18px, 4svh, 36px);
    --footer-pad-top: clamp(14px, 3svh, 28px);
    --madi-width: min(clamp(135px, 38vw, 175px), 26svh);
  }
}

/* Narrow phones: keep a few pixels of breathing room at the bottom. */
@media (max-width: 430px) and (min-height: 601px) and (max-height: 700px) {
  :root {
    --pad-bottom: clamp(18px, 3.5svh, 26px);
  }
}

/* Short phones: save space in the copy and between footer rows. */
@media (max-width: 600px) and (max-height: 600px) {
  :root {
    --pad-top: clamp(16px, 3svh, 28px);
    --pad-bottom: clamp(16px, 3svh, 28px);
    --desc-margin-top: clamp(16px, 5svh, 32px);
    --desc-size: clamp(1.4rem, min(7.4vw, 5.2svh), 2.7rem);
    --footer-gap: clamp(18px, 5svh, 32px);
    --footer-pad-top: clamp(14px, 3.5svh, 26px);
    --icon-size: clamp(38px, min(12vw, 8svh), 58px);
    --madi-width: clamp(110px, min(38vw, 25svh), 175px);
  }
}

@media (min-width: 431px) and (max-width: 600px) and (max-height: 600px) {
  :root {
    --title-width: min(calc(100vw - 16px), 100svh);
  }
}

/* Very small windows should stay usable instead of clipping the footer. */
@media (max-width: 600px) and (max-height: 520px) {
  :root {
    --title-width: min(calc(100vw - 16px), 96svh);
  }
}