:root {
  --bg: #F4EFE9;
  --ink: #1C1915;
  --mid: #7D756B;
  --light: #6D6D6D;
  --link-line: #C9C1B6;
  --highlight-main: #ACC6F9;
  --highlight-pool: #466BF9;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease;
}

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

html {
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: gray transparent;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "EB Garamond", "Georgia", serif;
  font-size: 1rem;
  font-weight: 400;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  position: relative;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

.page {
  width: 100%;
  max-width: 480px;
  position: relative;
  z-index: 1;
  opacity: 1;
  transition: opacity 120ms ease;
  /* animation: fadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards; */
}

.is-leaving .page {
  opacity: 0;
}

.design-page {
  align-items: center;
  justify-content: center;
}

.design-work {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 480px;
}

.design-work img {
  display: block;
  width: 100%;
  height: auto;
}

.page > p,
.page > h1,
.page .signature,
.page .colophon {
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  margin-right: auto;
}

.chapter-nav {
  position: fixed;
  top: 50%;
  left: 1.5rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  transform: translateY(-50%);
  font-size: 0.92rem;
  line-height: 1.35;
}

.chapter-nav__link {
  min-height: 1.35em;
  color: var(--light);
  text-decoration: none;
  text-wrap: nowrap;
  transition: color 0.18s ease;
}

.chapter-nav__link:hover,
.chapter-nav__link:focus-visible,
.chapter-nav__link.is-active {
  color: var(--ink);
}

.chapter-nav__link:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.2rem;
}

.chapter-nav__mark {
  display: inline-block;
  font-size: 1.22em;
  font-weight: 800;
  margin-left: 0.25em;
  opacity: 0;
}

.chapter-nav__link.is-active .chapter-nav__mark {
  opacity: 1;
}

/*
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/

.hero-photo {
  width: 100%;
  min-width: min(200px, 100%);
  position: relative;
  margin: 0 auto 2rem;
  overflow: visible;
  isolation: isolate;
}

.hero-photo__image {
  width: 100%;
  display: block;
  height: auto;
  position: relative;
  z-index: 1;
}

p,
.intro-heading {
  font-size: 1rem;
  line-height: 1.5em;
  color: var(--ink);
  font-weight: 400;
}

p + p,
.intro-heading + p {
  margin-top: 1.25rem;
}

p a {
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 0.1em 0.2em;
  margin: 0 -0.2em;
  background-repeat: no-repeat;
  background-size: 100% 90%;
  background-position: 0 60%;
  /* transition: background-size 0.25s ease; */
  border-radius: 2px;
}

p a:hover {
  background-size: 100% 100%;
}

p a.link-highlight {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r1' x='-5%25' y='-5%25' width='110%25' height='110%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='1' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3ClinearGradient id='g1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23466BF9' stop-opacity='0.6'/%3E%3Cstop offset='8%25' stop-color='%23ACC6F9' stop-opacity='0.42'/%3E%3Cstop offset='92%25' stop-color='%23ACC6F9' stop-opacity='0.42'/%3E%3Cstop offset='100%25' stop-color='%23466BF9' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='2' width='118' height='26' rx='3' ry='3' fill='url(%23g1)' filter='url(%23r1)'/%3E%3C/svg%3E");
}

p a.link-secondary {
  background-size: 100% 0.26em;
  background-position: 0 92%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='r2' x='-5%25' y='-15%25' width='110%25' height='130%25'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.04' numOctaves='4' seed='7' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='2.2' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3ClinearGradient id='g2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0%25' stop-color='%23466BF9' stop-opacity='0.6'/%3E%3Cstop offset='8%25' stop-color='%23ACC6F9' stop-opacity='0.42'/%3E%3Cstop offset='92%25' stop-color='%23ACC6F9' stop-opacity='0.42'/%3E%3Cstop offset='100%25' stop-color='%23466BF9' stop-opacity='0.6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='1' y='4' width='118' height='4' rx='2' ry='2' fill='url(%23g2)' filter='url(%23r2)'/%3E%3C/svg%3E");
}

p a.link-secondary:hover {
  background-size: 100% 0.32em;
}

p strong {
  font-weight: 600;
}

.aside {
  color: var(--mid);
}

.signature {
  margin-top: 2rem;
  line-height: 1;
}

.signature__image {
  display: block;
  width: min(11rem, 52vw);
  height: auto;
}

.signature__vector {
  overflow: visible;
  shape-rendering: geometricPrecision;
  opacity: 0;
}

.signature__segment--fill,
.signature__segment--dot {
  fill: var(--ink);
  opacity: 1;
}

.signature__segment--stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.signature__segment--dot {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(2.15);
}

.signature__vector.is-visible {
  opacity: 1;
}

.colophon {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.colophon a {
  font-size: 0.875rem;
  color: var(--light);
  text-decoration: none;
  /* transition: color 0.25s ease; */
}

.colophon a:hover {
  color: var(--ink);
}

.colophon .dot {
  color: var(--link-line);
  user-select: none;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01ms;
  }

  .page {
    transition-duration: 0.01ms;
  }

  .page {
    animation-duration: 0.01ms;
    animation-delay: 0ms;
  }

  .signature__vector {
    opacity: 1;
  }

  .signature__segment--stroke {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
}

@media (max-width: 970px) {
  body {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 1.5rem;
  }

  .chapter-nav {
    position: static;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 0.85rem;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    transform: none;
  }

  .chapter-nav::-webkit-scrollbar {
    display: none;
  }

  .chapter-nav__link {
    display: inline-block;
    flex: 0 0 auto;
    min-height: 44px;
    color: var(--light);
    font-size: 0.8889rem;
    line-height: 1.2;
    padding: 0;
  }

  .chapter-nav__link.is-active,
  .chapter-nav__link[aria-current="page"] {
    color: rgba(28, 25, 21, 0.82);
  }

  .chapter-nav__link + .chapter-nav__link {
    margin-left: 1.16rem;
  }
}

@media (max-width: 520px) {
  html {
    font-size: 17px;
  }

  body {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}