/*
  Modern CSS Reset via https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
* {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@font-face {
  font-family: "plex-light";
  src: url("./fonts/IBMPlexSans-Light.woff2") format("woff2");
}

@font-face {
  font-family: "plex-medium";
  src: url("./fonts/IBMPlexSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "plex-mono";
  src: url("./fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "chauffeur-compressed-regular";
  src: url("./fonts/ChauffeurCompressed-Regular.woff2") format("woff2");
}

:root {
  --font-body: "plex-light", arial, sans-serif;
  --font-body-med: "plex-medium", arial, sans-serif;
  --font-mono: "plex-mono", menlo, monaco, monospace;

  /* Color system */
  --sl-base: 35% 15%;
  --sl-accent: 95% 65%;
  --hue-red: 0;
  --hue-orange: 28;
  --hue-green: 121;
  --hue-blue: 215;
  --hue-purple: 280;
  --color-hue: var(--hue-red);
  --color-accent: hsl(var(--color-hue) var(--sl-accent));
  --color-background: hsl(var(--color-hue) var(--sl-base));
  --color-foreground: hsl(var(--color-hue) 100% 95%);

  /* Grid system */
  --grid-columns: 6;
  --grid-col-max: 84px;
  --grid-col-min: clamp(40px, 6vw, var(--grid-col-max));
  --grid-gutter: 21px;
  --grid-max-width: calc(
    var(--grid-columns) * var(--grid-col-max) + (var(--grid-columns) - 1) *
      var(--grid-gutter)
  );

  /* Spacing: Base is 4px */
  --spacing: 0.25rem;

  --header-offset: 6.5rem;
}

[data-color="red"] {
  --color-hue: var(--hue-red);
}

[data-color="orange"] {
  --color-hue: var(--hue-orange);
}

[data-color="green"] {
  --color-hue: var(--hue-green);
}

[data-color="blue"] {
  --color-hue: var(--hue-blue);
}

[data-color="purple"] {
  --color-hue: var(--hue-purple);
}

.grid {
  display: grid;
  margin: auto;
  max-width: var(--grid-max-width);
}

.grid-core-section {
  --g-start: 1;
  --g-end: -1;
  grid-column: var(--g-start) / var(--g-end);
}

body {
  --px: 1.5rem;
  background-color: var(--color-background);
  line-height: 1.2;
  padding: 0 var(--px);
  transition: background-color 0.4s steps(3);
}

body,
input {
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-weight: 300;
}

a {
  color: var(--color-accent);
}

b,
strong,
button,
[type="button"],
.font-medium {
  font-family: var(--font-body-med);
  font-weight: 500;
}

hr {
  display: none;
}

.font-mono {
  font-family: var(--font-mono);
  font-weight: 400;
}

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xl {
  font-size: 1.25rem;
}

.the-right-stripes {
  position: relative;
}

.the-right-stripes::after {
  --offset: calc(var(--spacing) * 6);
  --r: calc(var(--grid-col-min) * 0.6);
  background: hsl(0 0 0 / 15%);
  content: "";
  display: none;
  pointer-events: none;
  position: absolute;
  height: var(--h, 100%);
  top: var(--t, 0);
  right: var(--r);
  width: var(--grid-col-min);
  z-index: 0;
}

.header-img-container {
  --h-min: 60dvh;
  --h-max: 520px;
  grid-column: 1 / -1;
  grid-row: 1;
  max-height: min(var(--h-min), var(--h-max));
  overflow: hidden;
}

.header-img-container.the-right-stripes::after {
  --h: 77%;
}

.header-img {
  --mr: auto;
  --ml: auto;
  --w: 92%;
  --w-max: 607px;
  display: none;
  height: auto;
  margin-left: var(--ml);
  margin-right: var(--mr);
  max-width: var(--w-max);
  width: var(--w);
}

[data-color="red"] .img-red,
[data-color="orange"] .img-orange,
[data-color="green"] .img-green,
[data-color="blue"] .img-blue,
[data-color="purple"] .img-purple {
  display: block;
}

.latchbolt-logomark {
  align-self: end;
  color: #fff;
  grid-column: 1 / -1;
  grid-row: 1;
  transform: translateY(var(--header-offset));
}

.latchbolt-mark {
  align-items: center;
  display: flex;
  justify-content: center;
  padding-bottom: 2.5rem;
}

.latchbolt-mark svg {
  --size: 110px;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.latchbolt-logo svg {
  height: auto;
  width: 100%;
}

.tagline-container {
  container-type: inline-size;
}

.tagline {
  --fs-target: 9cqw;
  --ls-target: 0.35cqw;
  color: var(--color-accent);
  font-family: "chauffeur-compressed-regular";
  font-size: clamp(1rem, var(--fs-target), 3.25rem);
  font-weight: 400;
  letter-spacing: clamp(0.05rem, var(--ls-target), 0.325rem);
  line-height: 0.8;
  padding-top: 0.33rem;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}

main > *,
footer > * {
  position: relative;
  z-index: 1;
}

main {
  padding-top: calc((var(--spacing) * 20) + var(--header-offset));
  padding-bottom: calc(var(--spacing) * 25);
}

main.the-right-stripes::after {
  --t: calc(var(--header-offset) + var(--offset));
  --h: calc(100% - var(--t) - var(--offset));
}

footer {
  border-top: 8px solid currentColor;
  padding-top: calc(var(--spacing) * 6);
  padding-bottom: calc(var(--spacing) * 20);
}

footer.the-right-stripes::after {
  --t: var(--offset);
  --h: calc(100% - var(--t));
}

label {
  display: block;
  padding-bottom: var(--spacing);
}

.email-field {
  background-color: hsl(var(--color-hue) 19% 24%);
  border-radius: 4px;
  display: inline-flex;
  font-size: 1rem;
  gap: 3px;
  padding: 2px;
  width: 100%;
}

.email-field input {
  appearance: none;
  background: none;
  border: 0;
  display: inline-block;
  padding: calc(var(--spacing) * 3);
  flex: 1;
}

.email-field input::placeholder {
  color: hsl(0 0 100% / 60%);
}

.email-field button {
  appearance: none;
  background-color: hsl(var(--color-hue) 19% 10%);
  border: 0;
  border-radius: 3px;
  color: var(--color-foreground);
  cursor: pointer;
  padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
}

.contact {
  line-height: 2;
  padding-top: calc(var(--spacing) * 12);
}

.highlighted {
  border-bottom: 4px solid transparent;
  border-image: url("/static/images/highlight.svg") 4;
}

@media (min-width: 580px) {
  .grid {
    grid-template-columns: repeat(
      var(--grid-columns),
      minmax(var(--grid-col-min), 1fr)
    );
    column-gap: var(--grid-gutter);
  }

  .grid-core-section {
    --g-start: 3;
  }

  .the-right-stripes::after {
    display: block;
  }

  body {
    --px: 2.5rem;
  }

  .header-img-container {
    --h-min: 82dvh;
    --h-max: 809px;
  }

  .header-img {
    --mr: 0;
    --ml: 2rem;
    --w: 50vw;
    --w-max: 380px;
  }

  .latchbolt-mark {
    --cols: 2;
    grid-column: span var(--cols);
    justify-content: flex-end;
    padding-bottom: 0;
  }

  .latchbolt-mark svg {
    --size: 90px;
  }

  .tagline {
    --fs-target: 6cqw;
  }

  .email-field {
    font-size: inherit;
    max-width: 294px;
  }
}

@media (min-width: 900px) {
  :root {
    --grid-columns: 12;
  }

  body {
    --px: 0;
  }

  .grid-core-section {
    --g-start: 6;
    --g-end: -2;
  }

  .header-img-container.the-right-stripes::after {
    right: calc((var(--grid-col-min) * 4) * 0.5);
  }

  .header-img {
    --ml: calc((var(--grid-col-min) * 2) + (var(--grid-gutter) * 2));
    --w-max: 607px;
  }

  .latchbolt-mark {
    --cols: 5;
    padding-top: 1.5rem;
    padding-right: 1.25rem;
  }

  .latchbolt-mark svg {
    --size: 110px;
  }

  .tagline {
    --fs-target: 4cqw;
  }
}

@media (min-width: 1120px) {
  body {
    --px: 2.5rem;
  }

  .header-img-container.the-right-stripes::after {
    --h: 75%;
    right: var(--r);
  }

  .grid-core-section {
    --g-end: -1;
  }

  .latchbolt-mark svg {
    --size: 140px;
  }

  .tagline {
    --fs-target: 4.25cqw;
    --ls-target: 1cqw;
  }
}