:root { --space: 16px; color-scheme: light; font-family: Optima, Candara, "Segoe UI", sans-serif; font-size: 16px; color: #000; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
main { margin: var(--space); max-width: 42rem; }
body:has(#looks:target) main { max-width: none; }
h1 { margin: 0 0 12px; font: inherit; line-height: 1.5; }
#handwritten-title { display: block; width: min(144px, 100%); min-height: 38.4px; }
main > nav, main > section { transition: opacity 450ms ease; }
.title-intro body { overflow: hidden; }
.title-intro h1 { height: 38.4px; }
.title-intro main > nav, .title-intro main > section { opacity: 0; visibility: hidden; pointer-events: none; }
.title-intro #handwritten-title {
  position: fixed;
  width: min(88vw, 1100px, 240vh);
  min-height: 0;
  aspect-ratio: 766.00390625 / 200.4296875;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  transform-origin: top left;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  main > nav, main > section { transition: none; }
}
.quiet-cover { filter: grayscale(1); }
nav { display: flex; align-items: baseline; gap: var(--space); margin-bottom: var(--space); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .6; }
nav a:hover { opacity: 1; }
a:focus-visible { outline: 1px solid; outline-offset: 5px; }
#sites-tab { font-weight: 600; }
#writes-tab { color: #fff; }
#writes-tab.glimpse:not(:hover):not(:focus) { color: #000; }
#writes-tab:hover, #writes-tab:focus-visible {
  color: #fff;
  background: #c5e3ff;
  opacity: 1;
  transition: none;
  animation: none;
}
#writes-tab.discovered { color: #000; background: transparent; opacity: 1; }
body:has(#writes:target) #writes-tab {
  color: #000;
  background: transparent;
  font-weight: 600;
  opacity: 1;
  transition: none;
}
ul { display: grid; gap: var(--space); list-style: none; padding: 0; margin: 0; }
li { line-height: 1.5; padding: 0; overflow-wrap: anywhere; }
li a { display: inline-block; }
#website-list { grid-auto-rows: 1fr; }
#website-list .website-link { display: flex; align-items: flex-start; gap: var(--space); }
#website-list > li { padding-bottom: var(--space); border-bottom: 1px solid #000; }
.website-preview { flex: 0 0 120px; width: 120px; height: 78px; object-fit: cover; }
.website-copy { display: block; min-width: 0; }
.website-name { display: block; }
.website-description { display: block; margin-top: var(--space); font-size: 15px; line-height: 1.5; }
.book-list li { display: flex; align-items: center; gap: var(--space); }
.book-list img { display: block; flex: 0 0 80px; width: 80px; height: 120px; object-fit: contain; object-position: left center; }
p { margin: 0 0 var(--space); line-height: 1.5; }
#books, #looks, #writes { display: none; }
body:has(#books:target, #looks:target, #writes:target) #sites { display: none; }
body:has(#books:target) #books { display: block; }
body:has(#looks:target) #looks { display: block; }
body:has(#books:target, #looks:target, #writes:target) #sites-tab { font-weight: 400; }
body:has(#books:target) #books-tab { font-weight: 600; }
body:has(#looks:target) #looks-tab { font-weight: 600; }
body:has(#writes:target) main {
  max-width: none;
  height: calc(100vh - 2 * var(--space));
  height: calc(100dvh - 2 * var(--space));
  display: flex;
  flex-direction: column;
}
body:has(#writes:target) main > h1,
body:has(#writes:target) main > nav { flex-shrink: 0; }
body:has(#writes:target) #writes { display: flex; flex: 1; min-height: 0; }
#writes iframe { display: block; width: 100%; height: 100%; min-height: 0; border: 0; }
.photo-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space); max-width: 600px; margin-inline: auto; }
.photo-list img { display: block; width: 100%; height: auto; }
section { scroll-margin-top: 140px; }
@media (max-width: 600px) {
  .website-preview { flex-basis: 84px; width: 84px; height: 63px; }
}