: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; }
h1 { margin: 0 0 12px; font: inherit; line-height: 1.5; }
#handwritten-title { display: block; width: min(120px, 100%); min-height: 32px; }
main > nav, main > section { transition: opacity 450ms ease; }
.title-intro body { overflow: hidden; }
.title-intro h1 { height: 32px; }
.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; }
a:focus-visible { outline: 1px solid; outline-offset: 5px; }
#coding-tab { font-weight: 600; }
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; }
#reading, #looks { display: none; }
body:has(#reading:target, #looks:target) #coding { display: none; }
body:has(#reading:target) #reading { display: block; }
body:has(#looks:target) #looks { display: block; }
body:has(#reading:target, #looks:target) #coding-tab { font-weight: 400; }
body:has(#reading:target) #reading-tab { font-weight: 600; }
body:has(#looks:target) #looks-tab { font-weight: 600; }
.photo-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.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; }
  .photo-list {
    grid-template-columns: minmax(0, 1fr);
    margin-inline: calc(-1 * var(--space));
  }
}