@import url("/scrollbars.css");

@font-face {
  font-family: "Rough Serif";
  src: url("/fonts/rough-serif/rough-serif.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DynaPuff";
  src: url("/fonts/dynapuff/dynapuff.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Raise inherited and rem-based text together; preserve the welcome heading below. */
  --reading-scale: 1.125;
  font-size: calc(100% * var(--reading-scale));
  --dust-grey: #dad7cdff;
  --dry-sage: #a3b18aff;
  --fern: #588157ff;
  --hunter-green: #3a5a40ff;
  --pine-teal: #344e41ff;
}

body {
  font-family: "Rough Serif", "Times New Roman", serif;
}

/* Table headers and alternating rows use the site palette. */
table {
  color: var(--pine-teal);
}

th {
  background-color: var(--dry-sage);
  color: white;
  font-family: "DynaPuff", sans-serif;
}

tbody > tr:nth-child(even) {
  background-color: #edf2e5;
}

@media (any-hover: hover) and (any-pointer: fine) {
  body.time-machine-cursor,
  body.time-machine-cursor * {
    cursor: image-set(url("/back-to-the-future-delorean-cursor-9e3323af-80.webp") 2x) 5 5, auto;
  }

  body.time-machine-cursor :is(input, textarea, [contenteditable="true"]),
  body.time-machine-cursor [contenteditable="true"] * {
    cursor: text;
  }

  body.time-machine-cursor :is(
    a[href], button, [role="button"], [role="link"], summary, select,
    input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])
  ):not(:disabled):not([aria-disabled="true"]),
  body.time-machine-cursor :is(
    a[href], button, [role="button"], [role="link"], summary, select,
    input:is([type="button"], [type="submit"], [type="reset"], [type="checkbox"], [type="radio"])
  ):not(:disabled):not([aria-disabled="true"]) * {
    cursor: url("/tiny-spiderman-web-shot-37cf94e5-32.webp") 39 36, pointer;
  }
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "DynaPuff", sans-serif;
}

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1.17rem;
}

h4 {
  font-size: 1rem;
}

h5 {
  font-size: 0.83rem;
}

h6 {
  font-size: 0.67rem;
}

.home {
  position: relative;
  isolation: isolate;
  background: var(--dust-grey);
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

body:has(.home) {
  overflow: hidden;
}

/* The wallpaper stays viewport-sized, independent of page length. */
.home::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/4kt.png") center / cover no-repeat;
}

.home > .header {
  width: 100%;
  height: 10dvh;
  flex: 0 0 10dvh;
  min-height: 0;
}

.home > .header > .banner {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.profile-picture {
  display: block;
  width: min(8dvh, 15vw);
  height: min(8dvh, 15vw);
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2px solid var(--dust-grey);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
}

.banner-title {
  font-family: "DynaPuff", sans-serif;
  font-size: min(6dvh, 8vw);
  font-weight: 700;
  line-height: 1.3;
  color: white;
  text-align: center;
}

.banner-letters {
  display: flex;
  justify-content: center;
}

.banner-letters > span {
  -webkit-text-stroke: 0.2em var(--letter-outline);
  paint-order: stroke fill;
}

.banner-letters > span:nth-child(5n + 1) {
  --letter-outline: var(--dust-grey);
}

.banner-letters > span:nth-child(5n + 2) {
  --letter-outline: var(--dry-sage);
}

.banner-letters > span:nth-child(5n + 3) {
  --letter-outline: var(--fern);
}

.banner-letters > span:nth-child(5n + 4) {
  --letter-outline: var(--hunter-green);
}

.banner-letters > span:nth-child(5n + 5) {
  --letter-outline: var(--pine-teal);
}

.home .welcome {
  flex: 0 0 auto;
  text-align: center;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.board {
  background: var(--hunter-green);
  border-radius: 1rem;
  display: flex;
  flex: 1 0 auto;
  width: 100%;
  max-width: 90rem;
  min-width: 0;
  padding: 1rem;
}

.papergrid {
  background: var(--dry-sage);
  display: flex;
  flex: 1;
  min-width: 0;
  border-radius: 0.75rem;
}

.page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1;
  min-width: 0;
  gap: 1rem;
  padding: 1rem;
}

.about-me {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.gameboy {
  width: 100%;
  max-width: 22rem;
}

.gameboy-image {
  display: block;
  width: 100%;
  height: auto;
}

.page > article.content,
.page > .about-me {
  background: white;
  background-size: 40px 40px;
  background-image: radial-gradient(circle, var(--pine-teal) 1px, rgba(0, 0, 0, 0) 1px);
  padding: 1rem;
  border-radius: 0.5rem;
}

.page > article.content {
  min-width: 0;
  padding: 1rem;
  overflow-wrap: anywhere;
}

.home-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  width: 100%;
  height: 90dvh;
  flex: 0 0 90dvh;
  min-height: 0;
  box-sizing: border-box;
  padding-bottom: .25rem;
}

.main-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0.5rem;
  width: calc(100% - 2rem);
  max-width: 100rem;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background: var(--dust-grey);
  border: 1px solid var(--pine-teal);
  border-radius: 0.25rem;
  box-shadow:
    0 0 0 1px var(--dry-sage),
    0 0 0 2px var(--hunter-green),
    inset 0 1px 0 var(--dust-grey);
}

.navigation-menus {
  grid-column: 1 / -1;
  min-width: 0;
}

.admin-menu {
  color: var(--pine-teal);
  font-family: "DynaPuff", sans-serif;
  font-size: 0.75rem;
  text-align: right;
  background: linear-gradient(
    to bottom,
    var(--dust-grey),
    var(--dry-sage) 48%,
    var(--fern) 52%,
    var(--dry-sage)
  );
  border-top: 1px solid var(--dry-sage);
  border-bottom: 1px solid var(--hunter-green);
}

.admin-menu a {
  display: inline-block;
  color: var(--pine-teal);
  line-height: 2;
  text-decoration: none;
  text-shadow: 0 1px 0 var(--dust-grey);
}

.admin-menu a:hover {
  text-decoration: underline;
}

.admin-menu a:focus-visible {
  outline: 2px solid var(--pine-teal);
  outline-offset: 1px;
}

.main-menu {
  grid-column: 1 / -1;
  padding: 0;
  background: linear-gradient(
    to bottom,
    var(--dust-grey) 0%,
    var(--dry-sage) 18%,
    var(--fern) 48%,
    var(--hunter-green) 52%,
    var(--fern) 100%
  );
  border-top: 1px solid var(--dust-grey);
  border-bottom: 1px solid var(--pine-teal);
  border-radius: 0.25rem 0.25rem 0 0;
  box-shadow:
    inset 0 1px 0 var(--dust-grey),
    inset 0 -1px 0 var(--dry-sage),
    0 1px 0 var(--dust-grey),
    0 3px 0 var(--dry-sage);
}

.main-menu ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.main-menu a,
.main-menu [aria-disabled] {
  display: block;
  padding: 0;
  border-radius: 0.25rem 0.25rem 0 0;
  color: var(--dust-grey);
  font-family: "DynaPuff", sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 1px var(--pine-teal);
}

/* Keep the public page tabs compact and on one row, including the feed tab. */
.navigation-menus .main-menu ul {
  display: flex;
  flex-wrap: nowrap;
  gap: .15rem;
  overflow-x: auto;
}
.navigation-menus .main-menu li { flex: 1 0 auto; }
.navigation-menus .main-menu a {
  padding: .2rem .4rem;
  font-size: .68rem;
  line-height: 1.4;
  white-space: nowrap;
}

.main-menu a:hover,
.main-menu a[aria-current="page"] {
  background: linear-gradient(
    to bottom,
    var(--dust-grey) 0%,
    var(--dry-sage) 48%,
    var(--fern) 52%,
    var(--dry-sage) 100%
  );
  color: var(--pine-teal);
  text-shadow: 0 1px 0 var(--dust-grey);
  box-shadow:
    inset 1px 0 0 var(--dry-sage),
    inset -1px 0 0 var(--hunter-green);
}

.main-menu a:focus-visible {
  outline: 3px solid var(--dust-grey);
  outline-offset: 2px;
}

.main-menu [aria-disabled="true"] {
  color: var(--dry-sage);
  cursor: default;
}

.content-column {
  min-width: 0;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0;
  border: 1px solid var(--fern);
  border-radius: 0.25rem;
  background: linear-gradient(
    to bottom,
    var(--dry-sage),
    var(--dust-grey) 1.5rem
  );
  box-shadow:
    inset 0 1px 0 var(--dust-grey),
    inset 1px 0 0 var(--dust-grey);
  color: var(--pine-teal);
  overflow-wrap: anywhere;
}

.welcome-title {
  margin: 2rem 0;
  font-family: "DynaPuff", sans-serif;
  font-size: clamp(calc(2rem / var(--reading-scale)), 6vw, calc(5rem / var(--reading-scale)));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.welcome-letters {
  display: inline-flex;
}

.welcome-letters > span {
  display: inline-block;
  color: var(--letter-color);
  -webkit-text-stroke: 0.2em white;
  paint-order: stroke fill;
  animation: welcome-wave 1.8s ease-in-out infinite;
  animation-delay: calc(var(--letter-index) * -0.15s);
}

.welcome-letters > span:nth-child(1) {
  --letter-color: var(--dust-grey);
  --letter-index: 0;
}

.welcome-letters > span:nth-child(2) {
  --letter-color: var(--dry-sage);
  --letter-index: 1;
}

.welcome-letters > span:nth-child(3) {
  --letter-color: var(--fern);
  --letter-index: 2;
}

.welcome-letters > span:nth-child(4) {
  --letter-color: var(--hunter-green);
  --letter-index: 3;
}

.welcome-letters > span:nth-child(5) {
  --letter-color: var(--pine-teal);
  --letter-index: 4;
}

.welcome-letters > span:nth-child(6) {
  --letter-color: var(--dust-grey);
  --letter-index: 5;
}

.welcome-letters > span:nth-child(7) {
  --letter-color: var(--dry-sage);
  --letter-index: 6;
}

@keyframes welcome-wave {
  0%, 100% {
    transform: translateY(0.12em);
  }
  50% {
    transform: translateY(-0.12em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-letters > span {
    animation: none;
  }
}

body:has(.resources-page) {
  min-height: 100dvh;
  padding: clamp(1rem, 3vw, 2rem);
  background: #edeee5 url("/TTNG-Desktops_13_Orig.png") left center / cover no-repeat fixed;
}

.resources-page {
  width: 100%;
  max-width: 42rem;
  min-width: 0;
  margin: 0 0 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  color: var(--pine-teal);
  line-height: 1.6;
  overflow-wrap: anywhere;
  background: #edeee5;
  border: 1px solid var(--pine-teal);
  border-radius: .25rem;
}

.resources-heading {
  margin-bottom: 1.5rem;
}

.resources-heading p {
  margin-top: .5rem;
}

.resources-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.resource-section {
  min-width: 0;
  border: 1px solid var(--fern);
  border-radius: .25rem;
  background: #f4f3ed;
}

.resource-section h2 {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--fern);
  background: linear-gradient(var(--dry-sage), var(--dust-grey));
  font-size: 1.1rem;
}

.resource-section ul {
  list-style: disc;
  padding: 1rem 1rem 1rem 2rem;
}

.resource-section li + li {
  margin-top: .65rem;
}

.resource-section li::marker {
  color: var(--fern);
}

.resource-section p {
  padding: 1rem;
}

.resource-section ul + p {
  padding-top: 0;
  padding-bottom: 0;
}

.resource-section a {
  color: var(--hunter-green);
  text-underline-offset: .15em;
}

.resource-section a:hover {
  color: var(--pine-teal);
}

.resource-section a:focus-visible {
  outline: 2px solid var(--fern);
  outline-offset: 3px;
}

.resource-section .sitemap-tree {
  list-style: none;
  padding: 1rem 1.5rem;
  font-family: ui-monospace, monospace;
}

.resource-section .sitemap-tree > li {
  position: relative;
  margin: 0;
  padding: .4rem 0 .4rem 1.75rem;
}

.sitemap-tree > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--fern);
}

.sitemap-tree > li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 1.25rem;
  border-top: 1px solid var(--fern);
}

.sitemap-tree > li:last-child::before {
  bottom: auto;
  height: 1.2rem;
}

.site-footer {
  flex-shrink: 0;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  gap: 0 1rem;
  width: calc(100% - 2rem);
  max-width: 100rem;
  margin-bottom: .25rem;
  padding: 0;
  background: linear-gradient(
    to bottom,
    var(--dust-grey) 0%,
    var(--dry-sage) 18%,
    var(--fern) 48%,
    var(--hunter-green) 52%,
    var(--fern) 100%
  );
  border: 1px solid var(--pine-teal);
  border-radius: 0.25rem;
  box-shadow:
    0 0 0 1px var(--dry-sage),
    0 0 0 2px var(--hunter-green),
    inset 0 1px 0 var(--dust-grey),
    inset 0 -1px 0 var(--dry-sage);
  color: var(--dust-grey);
  font-family: "DynaPuff", sans-serif;
  font-size: 0.875rem;
  line-height: 2;
  text-shadow: 0 1px 1px var(--pine-teal);
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--dust-grey);
  outline-offset: 2px;
}

@media (max-width: 48rem) {
  .main-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
  }

  .main-content:has(> .content-column) {
    grid-template-rows: auto repeat(3, minmax(0, 1fr));
  }

  .home .welcome {
    font-size: clamp(calc(1.25rem / var(--reading-scale)), 5vw, calc(2rem / var(--reading-scale)));
  }

  .board,
  .papergrid {
    padding: 0.75rem;
  }

  .page {
    grid-template-columns: minmax(0, 1fr);
  }

  .gameboy {
    max-width: 18rem;
  }

  .page > article.content {
    min-height: 16rem;
  }
}

.content-column:has(> .welcome-title) {
  background-color: var(--dust-grey);
  background-image: radial-gradient(circle, var(--pine-teal) 1px, transparent 1px);
  background-size: 40px 40px;
}

.home-welcome-text {
  padding: 0 1.5rem 2rem;
  font-size: 1rem;
  text-align: justify;
  line-height: 1.7;
}

.content-column:focus-visible {
  outline: 2px solid var(--hunter-green);
  outline-offset: 2px;
}

.home-status-entry {
  margin: .75rem;
  border: 1px solid var(--fern);
  border-radius: .2rem;
  background: #f4f3ed;
}

.home-status-entry h2 {
  padding: .6rem;
  border-bottom: 1px solid var(--fern);
  background: linear-gradient(var(--dry-sage), var(--dust-grey));
  font-size: .85rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.status-content { padding: .75rem; line-height: 1.5; }
.status-content p { margin: 0; white-space: pre-wrap; }
.status-list { list-style: disc; margin: 0; padding-left: 1.1rem; }
.status-list > li + li { margin-top: .4rem; }
.status-list > li::marker { color: var(--fern); }
.status-fields { display: grid; gap: .65rem; margin: 0; }
.status-field { min-width: 0; }
.status-field + .status-field { border-top: 1px dotted var(--dry-sage); padding-top: .6rem; }
.status-field > dt { font-weight: bold; margin-bottom: .15rem; }
.status-field > dd { margin: 0; }
.status-field > dd > .status-fields { border-left: 2px solid var(--dry-sage); padding-left: .65rem; }
.status-empty { color: #52624f; font-style: italic; }

.home-status-entry h2 { display: flex; align-items: center; gap: .4rem; }
.status-icon { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
.home-links { margin: .75rem; border: 1px solid var(--fern); border-radius: .2rem; background: #f4f3ed; }
.home-links h2 { padding: .6rem; border-bottom: 1px solid var(--fern); background: linear-gradient(var(--dry-sage), var(--dust-grey)); font-size: .9rem; }
.home-links ul { list-style: none; padding: 0; margin: 0; }
.home-links li { padding: .75rem; }
.home-links li + li { border-top: 1px dotted var(--dry-sage); }
#neighborhood > ul,
#fanlistings > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  padding: 0;
}
#neighborhood > ul > li,
#fanlistings > ul > li {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow-wrap: anywhere;
}
.home-links a { color: var(--hunter-green); }
.home-links a:hover { color: var(--pine-teal); }
.home-links a:focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; }
.neighbor-link { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; font-weight: bold; }
.site-button { display: block; max-width: 100%; max-height: 88px; width: auto; height: auto; object-fit: contain; image-rendering: pixelated; }
.home-links p { margin: .5rem 0 0; white-space: pre-wrap; line-height: 1.5; }
.neighbor-tooltip-anchor {
  position: relative;
  width: fit-content;
  max-width: 100%;
}

.neighbor-tooltip {
  position: absolute;
  z-index: 10;
  top: calc(100% + .75rem);
  left: calc(50% + var(--tooltip-shift, 0px));
  transform: translateX(-50%);
  width: min(18rem, calc(100vw - 2rem));
  box-sizing: border-box;
  padding: .75rem 1rem;
  border: 2px solid var(--hunter-green);
  border-radius: 1rem;
  background: #f4f3ed;
  color: var(--pine-teal);
  box-shadow: 0 .35rem .8rem #344e4133;
  font-size: .95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.neighbor-tooltip[data-floating] {
  position: fixed;
  transform: none;
}

/* Bridge the gap so the bubble stays open while the pointer moves onto it. */
.neighbor-tooltip::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: -2px;
  right: -2px;
  height: calc(.75rem + 2px);
}

.neighbor-tooltip::after {
  content: "";
  position: absolute;
  top: -7px;
  left: var(--tooltip-tail, 50%);
  width: 12px;
  height: 12px;
  background: #f4f3ed;
  border-top: 2px solid var(--hunter-green);
  border-left: 2px solid var(--hunter-green);
  transform: translateX(-50%) rotate(45deg);
}

.neighbor-tooltip[data-placement="above"]::before {
  top: 100%;
  bottom: auto;
}

.neighbor-tooltip[data-placement="above"]::after {
  top: auto;
  bottom: -7px;
  transform: translateX(-50%) rotate(225deg);
}

.neighbor-tooltip-anchor:not([data-tooltip-dismissed]):is(:hover, :focus-within) > .neighbor-tooltip {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.ring-navigation { display: flex; flex-wrap: wrap; gap: .4rem .7rem; margin-top: .5rem; font-size: .85rem; }

.webring-widget { display: block; width: 100%; border: 0; background: transparent; }

.visitor-counter table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.visitor-counter :is(th, td) { padding: .75rem .5rem; text-align: center; vertical-align: middle; overflow-wrap: anywhere; }
.visitor-counter th { width: 45%; background: #edf2e5; color: var(--pine-teal); font-size: .8rem; line-height: 1.5; border-right: 1px solid var(--fern); }
.visitor-number { font-family: ui-monospace, "Courier New", monospace; font-size: .9rem; font-variant-numeric: tabular-nums; font-weight: bold; }

.site-badge-content { padding: .75rem; text-align: center; }
.site-badge-copy { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer; }
.site-badge-copy:focus-visible { outline: 2px solid var(--pine-teal); outline-offset: 3px; }
.site-badge-copy img { display: block; width: 88px; height: 31px; image-rendering: pixelated; }
.site-badge-content p, .site-badge-content details, .site-badge-content noscript { font-size: .8rem; line-height: 1.5; }
.site-badge-content details { margin-top: .65rem; text-align: left; }
.site-badge-content summary { cursor: pointer; }
.site-badge-content label { display: block; margin: .5rem 0; }
.site-badge-content textarea { display: block; box-sizing: border-box; width: 100%; min-width: 0; padding: .5rem; border: 1px solid var(--fern); background: #fffef9; color: var(--pine-teal); font: .7rem/1.5 ui-monospace, monospace; resize: vertical; }

.blog-page { padding: clamp(1rem, 2vw, 2rem); line-height: 1.6; }
.blog-page-heading { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fern); }
.blog-page-heading h1 { margin-bottom: .4rem; }
.blog-page a, .blog-archive a { color: var(--hunter-green); }
.blog-page a:hover, .blog-archive a:hover { color: var(--pine-teal); }
.blog-page a:focus-visible, .blog-archive :focus-visible { outline: 2px solid var(--fern); outline-offset: 3px; }
.blog-page [data-blog-list] { display: grid; gap: .75rem; padding: 0; list-style: none; }
.blog-page [data-blog-list] > li { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; background: #f4f3ed; border: 1px solid var(--fern); border-radius: .2rem; }
.blog-page [data-blog-list] a { font: 1.1rem/1.5 "DynaPuff", sans-serif; text-decoration: none; }
.blog-page [data-blog-list] a:hover { text-decoration: underline; }
.blog-page time { font-size: .85rem; color: #52624f; }
.blog-empty { padding: 1rem 0; }
.blog-back { display: inline-block; margin-bottom: 1.25rem; }
.blog-page article > header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fern); }
.blog-page article > header h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.4; margin-bottom: .5rem; }
.blog-content > * + * { margin-top: 1rem; }
.blog-content strong,
.blog-preview strong {
  font-family: "DynaPuff", sans-serif;
  font-weight: 700;
  color: #7b5925;
}
.blog-content code:not(pre code),
.blog-preview code:not(pre code) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  color: #743f54;
  background-color: #eee3e7;
  padding: .1em .3em;
  border-radius: .2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.blog-content :is(h1, h2, h3, h4, h5, h6),
.blog-preview :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
  line-height: 1.6;
}
.blog-content ul { list-style: disc; padding-left: 1.5rem; }
.blog-content ol { list-style: decimal; padding-left: 1.5rem; }
.blog-content img { max-width: 100%; height: auto; }
.blog-content pre { overflow: auto; padding: .8rem; background: #f4f3ed; border: 1px solid var(--dry-sage); }
.blog-content code { font-family: monospace; }
.blog-content blockquote { border-left: 3px solid var(--fern); padding-left: 1rem; }
.blog-content table,
.blog-preview table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  overflow-wrap: normal;
  border-collapse: separate;
  border-spacing: 2px;
  line-height: 1.6;
  text-align: start;
}
.blog-content th, .blog-content td,
.blog-preview th, .blog-preview td {
  border: 1px solid var(--dry-sage);
  padding: .5rem;
  vertical-align: middle;
}
.blog-content th, .blog-preview th {
  font-weight: 700;
}
.blog-content th:not([align]), .blog-preview th:not([align]) {
  text-align: center;
}
.blog-archive { margin: .75rem; border: 1px solid var(--fern); border-radius: .2rem; background: #f4f3ed; }
.blog-archive h2 { padding: .6rem; border-bottom: 1px solid var(--fern); background: linear-gradient(var(--dry-sage), var(--dust-grey)); font-size: .9rem; }
.archive-year + .archive-year { border-top: 1px solid var(--dry-sage); }
.archive-year summary { cursor: pointer; padding: .7rem .6rem; font-weight: bold; }
.archive-year summary small { margin-left: .5rem; font-size: .7rem; font-weight: normal; white-space: nowrap; }
.archive-year ul { list-style: none; padding: 0 .6rem .6rem; }
.archive-year li + li { border-top: 1px dotted var(--dry-sage); }
.archive-year a { display: block; padding: .5rem .25rem; text-decoration: none; line-height: 1.4; }
.archive-year a:hover span { text-decoration: underline; }
.archive-year a[aria-current="page"] { background: #e0e7d8; border-left: 2px solid var(--fern); }
.archive-year time { display: block; margin-top: .2rem; font-size: .7rem; color: #52624f; }
.archive-empty { padding: .75rem; line-height: 1.5; }

/* Navigation feedback overlays the layout without adding page height. */
#public-navigation-feedback {
  position: fixed;
  z-index: 40;
  top: 10dvh;
  left: 1rem;
  right: 1rem;
  pointer-events: none;
}
#public-navigation-feedback .navigation-notice { pointer-events: auto; }

/* The banner stays mounted while public page content changes. */
.skip-navigation { position: absolute; left: 1rem; top: 1rem; z-index: 20; padding: .65rem 1rem; background: #f4f3ed; color: var(--pine-teal); transform: translateY(-200%); }
.skip-navigation:focus { transform: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.navigation-progress { position: fixed; z-index: 30; top: 0; left: 0; height: 3px; width: 100%; background: var(--fern); opacity: 0; pointer-events: none; }
.navigation-progress.is-loading { opacity: 1; animation: navigation-loading 1s ease-in-out infinite alternate; }
.navigation-loading-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  max-width: calc(100vw - 2rem);
  padding: 1rem 1.5rem;
  border: 2px solid var(--fern);
  border-radius: .5rem;
  background: #f4f3ed;
  color: var(--pine-teal);
  box-shadow: 0 4px 20px #10231d44, inset 1px 1px 0 #fff;
  font-family: "DynaPuff", sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
}
.navigation-loading-card img {
  width: 7rem;
  height: 7rem;
  max-height: 25dvh;
  object-fit: contain;
  image-rendering: pixelated;
}
.navigation-notice { margin: .75rem 0; padding: .75rem 1rem; background: #f4f3ed; color: var(--pine-teal); border: 1px solid var(--fern); line-height: 1.5; }
.navigation-notice a { color: inherit; text-decoration: underline; }
#public-page.htmx-added { opacity: .7; }
#public-page { transition: opacity 120ms ease-out; }
@keyframes navigation-loading { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .navigation-progress.is-loading { animation: none; }
  .navigation-loading-card img { display: none; }
  #public-page { transition: none; }
}

.home-welcome-text { overflow-wrap: anywhere; }
.home-log .log-time { display: block; font-size: .75rem; opacity: .8; margin-bottom: .5rem; }
.home-log .log-status { font-size: .9rem; line-height: 1.35; text-wrap: balance; font-weight: bold; margin-bottom: .5rem; overflow-wrap: anywhere; }