/* Layout after Alex's "CI-CD v6" landing page (measured at 1307 x 925). */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #111111;
  --text: #555555;
  /* Placeholder panel until the image is chosen. The design's own tones are #e8e8e8 / #d6d6d6. */
  --stripe-a: #ededed;
  --stripe-b: #dbdbdb;
  /* The panel's left edge leans 30deg off vertical, like the logo's slash. */
  --slant: 0.5774; /* tan(30deg) */
}

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

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

body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.logo {
  display: block;
  width: 190px;
  height: auto;
}

h1 {
  margin: 0;
  color: var(--ink);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -0.025em;
}

p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
}

.panel {
  /* To show the image later: background: url("/assets/<image>") center / cover; */
  background: repeating-linear-gradient(
    135deg,
    var(--stripe-b) 0 6.8px,
    var(--stripe-a) 6.8px 13.6px
  );
  clip-path: polygon(calc(var(--panel-h) * var(--slant)) 0, 100% 0, 100% 100%, 0 100%);
}

/* Phones and narrow windows: text, then the panel. */
.page {
  --panel-h: 240px;
}

.intro {
  padding: 40px 24px 0;
}

/* Breaks as "Something versatile / is coming." */
.intro h1 {
  margin-top: 56px;
  max-width: 9.6em;
}

.intro p {
  margin-top: 28px;
  max-width: 21rem;
}

.panel {
  height: var(--panel-h);
  margin-top: 48px;
}

/* Desktop: the text column on the left, the slanted panel flush right. */
@media (min-width: 900px) {
  .page {
    --gap-y: max(10vh, 48px);
    --panel-h: max(80vh, 480px);
    position: relative;
    min-height: calc(var(--panel-h) + 2 * var(--gap-y));
  }

  .intro {
    position: relative;
    z-index: 1;
    padding: calc(var(--gap-y) + 38px) 0 0 53px;
  }

  .intro h1 {
    margin-top: 62px;
    font-size: 2.5rem;
  }

  .intro p {
    margin-top: 40px;
    max-width: 20.75rem;
  }

  .panel {
    position: absolute;
    top: var(--gap-y);
    right: 0;
    left: max(33.75%, 27rem);
    height: var(--panel-h);
    margin: 0;
  }
}