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

html, body {
  height: 100%;
}

@media (min-width: 601px) {
  html, body { overflow: hidden; }
}

body {
  background-color: #ffffff;
  color: #000000;
  font-family: 'Times New Roman', Times, serif;
  font-size: 0.9rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  padding: 5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transition: opacity 400ms ease;
}

.page.is-ready {
  opacity: 1;
}

.top, .bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  transition: opacity 500ms ease;
}

.bottom {
  align-items: flex-end;
}

.bottom-left {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bottom-meta {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: baseline;
}

#present {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 400ms ease;
}

#present.is-ready {
  opacity: 1;
}

nav {
  display: flex;
  gap: 2rem;
}

.site-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-start;
  gap: 0.6rem;
  counter-reset: toc;
  transition: opacity 500ms ease;
}

.site-nav a {
  border-bottom: none;
  padding-bottom: 0;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  transition: opacity 250ms ease, transform 250ms ease;
}

.site-nav a::before {
  counter-increment: toc;
  content: counter(toc, decimal-leading-zero);
  opacity: 0.4;
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: opacity 250ms ease;
}

.site-nav a:hover {
  opacity: 1;
  transform: translateX(4px);
}

.site-nav a:hover::before {
  opacity: 0.65;
}

a {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid #000000;
  padding-bottom: 1px;
  transition: opacity 250ms ease;
}

a:hover {
  opacity: 0.35;
}

a:focus-visible {
  outline: 1px solid;
  outline-offset: 2px;
}

.site-nav a:focus-visible {
  outline: none;
  opacity: 1;
  transform: translateX(4px);
}

.site-nav a:focus-visible::before {
  opacity: 0.65;
}

/* Copyright / colophon trigger */

.copyright {
  border-bottom: none;
  padding-bottom: 0;
}

/* Overlay views */

.overlay-view {
  position: absolute;
  inset: 0;
  padding: calc(5vw + 2.5rem) 5vw 5vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
}

[data-view] .top,
[data-view] .bottom,
[data-view] .site-nav {
  opacity: 0;
  pointer-events: none;
}

.view-title {
  position: absolute;
  top: 5vw;
  left: 5vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms ease;
  border-bottom: none;
  padding-bottom: 0;
}

[data-view] .view-title {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: 1;
}

[data-view="books"] #books-view,
[data-view="projects"] #projects-view,
[data-view="essays"] #essays-view,
[data-view="now"] #now-view,
[data-view="contact"] #contact-view,
[data-view="colophon"] #colophon-view,
[data-view="shortcuts"] #shortcuts-view,
[data-view="moon"] #moon-view,
[data-view="konami"] #konami-view,
[data-view="about"] #about-view,
[data-view="music"] #music-view,
[data-view="links"] #links-view,
[data-view="thoughts"] #thoughts-view {
  opacity: 1;
  pointer-events: auto;
}

.overlay-view .view-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

#about-view .view-list {
  max-width: calc(50vw - 5vw);
  gap: 1rem;
}

#thoughts-view .view-list {
  gap: 1rem;
}

.view-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
}

.view-label {
  margin-bottom: -0.25rem;
}

.view-list > .view-label ~ .view-label {
  margin-top: 1rem;
}

.thought-separator {
  border: none;
  border-top: 1px solid #000;
  width: 2rem;
  margin: 0.5rem 0;
  opacity: 0.4;
}

.thought-row {
  display: flex;
  gap: 1rem;
}

.thought-number {
  opacity: 0.4;
  font-size: 0.75rem;
  flex-shrink: 0;
  padding-top: 0.15rem;
}

.view-meta {
  opacity: 0.55;
}

.shortcut-key {
  display: inline-block;
  min-width: 2.5rem;
  font-style: italic;
}

.view-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/* Now view */

.now-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex: 1;
}

.now-body .view-list {
  align-self: flex-start;
}

.now-tree {
  width: 480px;
  height: auto;
  display: block;
  user-select: none;
  clip-path: inset(100% 0 0 0);
  transform-origin: bottom center;
}

@keyframes tree-reveal {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0% 0 0 0); }
}

@keyframes tree-breathe {
  0%      { transform: scale(1)     translateY(0);    animation-timing-function: ease-in; }
  33.33%  { transform: scale(1.036)  translateY(-4.8px); animation-timing-function: linear; }
  66.66%  { transform: scale(1.036)  translateY(-4.8px); animation-timing-function: ease-out; }
  100%    { transform: scale(1)     translateY(0); }
}

[data-view="now"] .now-tree {
  animation:
    tree-reveal 2.5s ease-out 0.4s forwards,
    tree-breathe 9s linear 2.9s infinite;
}

/* Moon */

#present-moon {
  display: none;
}

/* Hello flash */

.hello-flash {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-style: italic;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  z-index: 100;
}

.hello-flash.is-visible {
  opacity: 1;
}

/* Staggered fade-in */

.view-list > * {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 400ms ease, transform 400ms ease;
}

[data-view] .overlay-view .view-list > * {
  opacity: 1;
  transform: translateY(0);
}

/* Dark mode */

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;
    color: #ffffff;
  }

  a {
    color: #ffffff;
    border-bottom-color: #ffffff;
  }

  .overlay-view {
    background: #000000;
  }

  .thought-separator {
    border-top-color: #fff;
  }

  .now-tree {
    filter: invert(1);
  }
}

/* Mobile */

@media (max-width: 600px) {
  .bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .site-nav {
    gap: 0.6rem;
  }

  .site-nav a {
    padding: 0.15rem 0;
  }

  #about-view .view-list {
    max-width: 100%;
  }

  .bottom-left {
    flex-direction: column;
    gap: 1rem;
  }

  .bottom-meta {
    flex-direction: column;
    gap: 0.5rem;
  }

  #present {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  .view-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
  }

  .now-body {
    flex-direction: column;
    align-items: flex-start;
  }

  .now-tree {
    width: 100%;
    align-self: flex-start;
  }
}