/* elyslabs.ca. Colours, type and radii come from brand.css (a copy of brand/tokens/brand.css). */

:root {
  /* Background isles: Shallows on Foam, Swell on Deep Sea (style guide section 6) */
  --isles-land: var(--elys-shallows);
  --gutter: clamp(24px, 7vw, 112px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --isles-land: #1F2B38; }
}
:root[data-theme='dark'] { --isles-land: #1F2B38; }

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

html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--elys-bg);
  color: var(--elys-fg);
  font-family: var(--elys-font-body);
  font-size: 16px;
  line-height: 24px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--elys-accent);
  color: var(--elys-bg);
}

/* Text on the left, isles on the right. They sit in separate grid columns so they never overlap. */
.page {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  overflow: clip;
}

.intro {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: 96px 0 48px var(--gutter);
}

.logo {
  margin: 0 0 56px;
  line-height: 0;
}
.logo img {
  display: block;
  width: auto;
  height: 44px;
}

.tagline {
  margin: 0;
  max-width: 12em;
  font-family: var(--elys-font-display);
  font-weight: 600;
  /* "carefully shipped." is about 8.6em wide and never wraps, so size to the column */
  font-size: min(3rem, calc((50vw - var(--gutter)) / 9));
  line-height: 1.0833;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.nowrap { white-space: nowrap; }

.lede {
  margin: 20px 0 0;
  max-width: 34em;
  color: var(--elys-fg-muted);
  font-size: 18px;
  line-height: 28px;
  text-wrap: pretty;
}

/* About, How we work, Contact: quiet blocks under the lede, in the same column */
.section {
  margin-top: 48px;
  max-width: 34em;
}
.section h2 {
  margin: 0 0 8px;
  font-family: var(--elys-font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.01em;
}
.section p { margin: 0; }
.section p,
.principles {
  color: var(--elys-fg-muted);
  text-wrap: pretty;
}
.principles {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.principles strong {
  color: var(--elys-fg);
  font-weight: 600;
}
.section a {
  color: var(--elys-accent);
  text-underline-offset: 3px;
}

.isles {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: end;
  display: block;
  width: min(100%, 34rem);
  height: auto;
  max-height: 72vh;
  max-height: 72svh;
  margin-left: 48px;
}
.isles-land { fill: var(--isles-land); }
.isles-accent { fill: var(--elys-accent); }

.footer {
  grid-column: 1;
  grid-row: 2;
  padding: 0 0 32px var(--gutter);
  color: var(--elys-fg-muted);
  font-size: 13px;
  line-height: 18px;
}

/* Phones and narrow windows: stack the text, the isles and the footer */
@media (max-width: 760px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
  }
  .intro {
    padding: 64px var(--gutter) 40px;
    align-self: start;
  }
  .logo { margin-bottom: 40px; }
  .tagline { font-size: min(3rem, calc((100vw - 2 * var(--gutter)) / 9)); }
  .logo img { height: 36px; }
  .lede {
    font-size: 16px;
    line-height: 24px;
  }
  .isles {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: min(78%, 22rem);
    max-height: none;
    margin: 0 0 32px;
  }
  .footer {
    grid-row: 3;
    padding: 0 var(--gutter) 28px;
  }
}