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

/*@font-face {
  font-family: "Arbeit";
  src: url("../fonts/arbeit-book.woff2") format("woff2");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}*/

/* ==========================================================================
   Base unit

   1rem is the base line height: 24px at the browser's default text size.
   Every line height is a whole multiple of 1rem, and all type and spacing
   is sized in rem, so the whole page scales from this one value (and with
   the visitor's browser text-size setting).

   Font sizes are written as calc(<px> rem / 24) so the intended pixel size
   at the default setting stays readable.
   ========================================================================== */

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

:root {
  --black: #303030;
  --white: #fff;

  /* Type: size / line height */

  --text-small: 0.7rem;
  --text-small-leading: 1rem;
  --text-base: 0.7rem;
  --text-base-leading: 1rem;
  --text-prose: 1.0rem;
  --text-prose-leading: 1.5rem;
  --text-title: 1.7rem;
  --text-title-leading: 2rem;

  /* Layout */

  --prose-width: 95%;

  /* Spacing */

  --gutter: 1rem;
  --section-gap: 4rem;
}

@media (min-width: 720px) {
  :root {
    --text-title: 2.5rem;
    --text-title-leading: 4rem;
    --prose-width: 80%;
    /*--gutter: 2rem;*/
    --section-gap: 6rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --text-prose: 1rem;
    --text-prose-leading: 1.5rem;
    --prose-width: 45rem;
    --text-title: 3.5rem;
    --text-title-leading: 6rem;
    --section-gap: 8rem;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

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

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Arbeit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--text-base-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
  margin: 0;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: absolute;
  top: 1.0rem;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: var(--text-small);
  line-height: var(--text-small-leading);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* ==========================================================================
   Page
   ========================================================================== */

.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
  width: 95%;
  max-width: 52rem;
  margin: 0 auto;
  padding-bottom: var(--section-gap);
}

.label {
  font-size: var(--text-base);
  line-height: var(--text-base-leading);
  text-align: center;
}

/* Hero
   Fills most of the first screen like a cover page, leaving the Philosophy
   label and first lines of text peeking above the fold. svh keeps it stable
   while mobile browser toolbars show and hide. The negative margin cancels
   the section gap below the hero, since the hero's own empty space already
   separates it from what follows. */

.hero {
  --hero-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  min-height: var(--hero-height);
  margin-bottom: calc(-1 * var(--section-gap));
  padding: 3rem 0;
}

@supports (height: 1svh) {
  .hero {
    --hero-height: 80svh;
  }
}

.hero__title {
  font-size: var(--text-title);
  line-height: var(--text-title-leading);
  text-align: center;
  white-space: nowrap;
}

/* Sections */

.section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.0rem;
  width: 100%;
}

.prose {
  width: 100%;
  max-width: var(--prose-width);
  font-size: var(--text-prose);
  line-height: var(--text-prose-leading);
  letter-spacing: -0.02em;
}

/* One empty line between paragraphs, keeping text on the line grid. */
.prose p + p {
  margin-top: var(--text-prose-leading);
}

/* Symbols keep the pixel size of their SVG artwork. */

.symbols {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.symbols img {
  display: block;
  flex: none;
}

.symbols__dots {
  /*width: 62px;*/
  height: 62px;
}

.symbols__mascot {
  /*width: 43.707px;*/
  height: 64px;
}