/* myersmedia.co.uk — holding page.
   Reproduces the layout and type of the original Carrd page:
   fixed cover photo, dark overlay, two-column centred hero. */

:root {
  --overlay: rgba(21, 20, 28, 0.431);
  --backdrop: #15141c;
  --gutters: 9rem;
  --padding-horizontal: 3rem;
  --padding-vertical: 6rem;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
  line-height: 1;
  overflow-x: hidden;
  word-wrap: break-word;
  background-color: var(--backdrop);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* The photo sits behind everything, fixed, so it never scrolls with the text. */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to top, var(--overlay), var(--overlay)),
    url('/assets/images/bg.jpg');
  background-position: 0% 0%, center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  background-color: #ffffff;
}

#main {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
}

#main > .inner {
  width: 50rem;
  max-width: 100%;
  padding: var(--padding-vertical) var(--padding-horizontal);
}

/* The hero keeps its own height and centres the text block inside it,
   the way the original did with the photo showing through alongside. */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 35rem;
}

.hero > .cols {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  max-width: 35rem;
}

.cols > .col {
  flex: 0 0 auto;
  width: calc(50% + (var(--gutters) / 2));
  max-width: 100%;
  padding-left: var(--gutters);
  text-align: center;
}

.cols > .col:first-child { margin-left: calc(var(--gutters) * -1); }

h1 {
  margin: 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 2.375em;
  line-height: 1.25;
  color: #ffffff;
}

h1 + p {
  margin: 1.5rem 0 0 0;
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 1em;
  line-height: 2;
  color: rgba(255, 255, 255, 0.659);
}

@media (max-width: 1680px) { html { font-size: 12pt; } }

@media (max-width: 1024px) {
  #main > .inner {
    --padding-horizontal: 2rem;
    --padding-vertical: 4rem;
  }
}

@media (max-width: 980px) { html { font-size: 11pt; } }

/* Below this the two columns stack, so the photo is free of the text. */
@media (max-width: 736px) {
  html { font-size: 12pt; }
  :root { --gutters: 6rem; }
  #main > .inner {
    --padding-horizontal: 1.5rem;
    --padding-vertical: 3rem;
  }
  .hero { min-height: 26.25rem; }
  .hero > .cols {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .cols > .col,
  .cols > .col:first-child {
    width: 100%;
    margin-left: 0;
    padding-left: 0;
  }
  .cols > .col:empty { display: none; }
  h1 { font-size: 2.5em; }
}

@media (max-width: 480px) {
  :root { --gutters: 4.5rem; }
  .hero { min-height: 17.5rem; }
}