/* Reset */

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

img,
video {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Tokens */

:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-paper: #ededed;
  --color-link: #0000ee;
  --color-shadow: rgba(0, 0, 0, 0.5);

  --header-height: 94px;

  --font-cardinal-fruit: "Cardinal Fruit", serif;
  --font-cardinal-fruit-italic: "Cardinal Fruit Italic", serif;
  --font-graphik: "Graphik Light", sans-serif;

  --type-display-size: 38px;
  --type-heading-size: 32px;
  --type-heading-line-height: 1;
  --type-lead-size: 24px;
  --type-body-size: 16px;
  --type-body-line-height: 1;
  --type-caption-size: 14px;
  --type-reading-line-height: 1.4;
}

body {
  font-family: var(--font-graphik);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}

/* Theming */

.theme-light {
  --color-bg: var(--color-white);
  --color-text: var(--color-black);
}

.theme-dark {
  --color-bg: var(--color-black);
  --color-text: var(--color-white);
}

/* The palette the site actually uses. `.theme-light` and `.theme-dark` are
   kept for the alternating design they came from -- putting one of those
   classes back on a section is all it takes to return to it. */

.theme-paper {
  --color-bg: var(--color-paper);
  --color-text: var(--color-black);
}

.theme-light,
.theme-dark,
.theme-paper {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Shared type classes */

.heading {
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-line-height);
  text-align: center;
}

.rich-text {
  display: flex;
  flex-direction: column;
  gap: 1em;
  font-family: var(--font-cardinal-fruit);
  font-size: var(--type-body-size);
  line-height: var(--type-reading-line-height);
  text-wrap: balance;
}

/* Measure, not a hard cap: `ch` is the width of a zero, and most lowercase
   letters in Cardinal Fruit are narrower, so a full line usually runs a little
   past 60 characters. */
.rich-text > * {
  max-width: 50ch;
}

.rich-text em {
  font-family: var(--font-cardinal-fruit-italic);
  font-style: normal;
}

.rich-text strong {
  font-weight: 700;
}

.rich-text a {
  color: var(--color-link);
  text-decoration: underline;
}

.label {
  font-family: var(--font-graphik);
  font-size: var(--type-body-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Size classes for a whole region. They name `.rich-text` too because the
   prose baseline sets its own font-size, and an explicit declaration beats
   inheritance — without it the class would stop at the wrapper. */
.display,
.display .rich-text {
  font-size: var(--type-display-size);
}

.lead,
.lead .rich-text {
  font-size: var(--type-lead-size);
}

.caption {
  font-size: var(--type-caption-size);
}

/* Menu links */

.menu-links a {
  transition: opacity 200ms;
}

/* Dimming the rest of the list to spotlight the one under the pointer is a
   mouse affordance, and gating it on `hover: hover` keeps it off touch. There,
   `:hover` sticks on the first tap -- the link dims instead of following, and
   it takes a second tap to navigate. This is a hover media feature, not a
   second width breakpoint. */
@media (hover: hover) {
  .menu-links:hover a {
    opacity: 0.4;
  }

  .menu-links:hover a:hover {
    opacity: 1;
  }
}

/* Layout primitives */

/* Page gutter. Every region that should be inset from the page edge is
   listed here — add a selector rather than a new padding declaration. */
.site-header,
section,
.what-we-do__content,
.project-hero__info {
  padding-inline: 30px;
}

.layout-row {
  display: grid;
}

/* Grid items default to min-width:auto and refuse to shrink below their
   content, which lets a carousel push the page wider than the viewport. */
.layout-column {
  min-width: 0;
}

.layout-row--full {
  grid-template-columns: 1fr;
}

.layout-row--split {
  grid-template-columns: 1fr 1fr;
}

/* mobile breakpoint: 768px */
@media (max-width: 768px) {
  /* Both collapse to one size on a single column. */
  :root {
    --type-display-size: 32px;
    --type-lead-size: 32px;
  }

  .rich-text,
  .display .rich-text,
  .lead .rich-text {
    font-size: 24px;
  }

  .layout-row--split {
    grid-template-columns: 1fr;
  }
}

/* Scroll cues */

.scroll-cue {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 28px;
  color: var(--color-text);
  cursor: pointer;
  filter: drop-shadow(0 0 6px var(--color-shadow));
  transition: opacity 200ms;
}

.scroll-cue .icon-arrow {
  display: block;
  width: 100%;
  height: auto;
}

.scroll-cue--prev {
  left: 20px;
  transform: translateY(-50%) rotate(90deg);
}

.scroll-cue--next {
  right: 20px;
  transform: translateY(-50%) rotate(-90deg);
}

.scroll-cue.is-disabled {
  opacity: 0;
  pointer-events: none;
}

/* Page transitions */

.transition-fade {
  opacity: 1;
  transition: opacity 200ms;
}

html.is-animating .transition-fade {
  opacity: 0;
}

/* Sections */

section[id] {
  padding-block: 96px;
}

/* Accessibility */

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