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

:root {
  --white:       #F7F6F2;
  --off-white:   #ECEAE8;
  --dark:        #111210;
  --dark-mid:    #1C1E1A;
  --mid:         #2E3028;
  --accent:      #4A8FD8;
  --accent-dark: #174f8b;
  --text-light:  #6B6B60;
  --text-body:   #3A3B35;

  --serif:   'DM Serif Display', Georgia, serif;
  --sans:    'Outfit', system-ui, sans-serif;
  --reading: 'Bespoke Serif', Georgia, serif;

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }


@view-transition {
  navigation: auto;
}


.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 3rem;
}

section {
  position: relative;
}

@media (max-width: 900px) {
  .section-inner {
    padding: 0 1.5rem;
  }
}

.site-header {
  view-transition-name: header;
}

.site-footer {
  view-transition-name: footer;
}