/* The public indexes share a masthead; section-specific layouts begin below it. */
:root {
  --public-font: "adobe-caslon-pro", serif;
  --public-ink: #2d1810;
  --public-muted: #8b7355;
}
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
.public-site-header {
  box-sizing: border-box;
  width: 100%;
  max-width: 56rem;
  margin: 0 auto;
  padding: 64px 32px 48px;
  color: var(--public-ink);
  text-align: center;
  -webkit-font-smoothing: antialiased;
  view-transition-name: public-site-header;
}
.public-site-title {
  margin: 0;
  font: 700 3rem/1.2 var(--public-font);
  letter-spacing: normal;
}
.public-site-title a {
  color: inherit;
  text-decoration: none;
}
.public-section-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 1rem 0 0;
  padding: 0;
  font: 400 1.125rem/1.5 var(--public-font);
}
.public-section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--public-ink);
  text-decoration: none;
  text-underline-offset: 6px;
}
.public-section-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}
.public-section-nav a:hover { color: var(--public-muted); }
.public-site-header a:focus-visible {
  outline: 2px solid var(--public-ink);
  outline-offset: 5px;
}
@media (max-width: 768px) {
  .public-site-header { padding-inline: 16px; }
}

/* Progressive enhancement: ordinary links/history still work without support. */
@view-transition { navigation: auto; }
.public-section-content { view-transition-name: public-section-content; }
html[data-public-section="writing"] { --section-enter: -16px; --section-leave: 16px; }
html[data-public-section="photography"] { --section-enter: 16px; --section-leave: -16px; }
::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(public-site-header),
::view-transition-new(public-site-header) { animation: none; }
::view-transition-old(public-site-header) { display: none; }
::view-transition-old(public-section-content) {
  animation: public-section-out 120ms cubic-bezier(.7, 0, .84, 0) both;
}
::view-transition-new(public-section-content) {
  animation: public-section-in 200ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes public-section-out {
  to { opacity: 0; transform: translateX(var(--section-leave, 0px)); }
}
@keyframes public-section-in {
  from { opacity: 0; transform: translateX(var(--section-enter, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}