@import url("personal-site.css");

/* Static documentation layout and accessibility additions to the shared theme. */
:root { color-scheme: light; --rule: rgba(0, 0, 0, 0.2); }
body { min-height: 100vh; display: flex; flex-direction: column; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
img { max-width: 100%; height: auto; }
hr { border-top-color: var(--rule); }

.page-content { min-width: 0; }
.site-nav { flex-wrap: wrap; }
main.page-content { flex: 1; padding: 1rem 0 3rem; }

.grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.projects-grid { align-items: start; }
.card-link, .card-link:hover { display: block; border-bottom: 0; border-radius: 14px; }
.project-card { overflow: hidden; }
.project-media { min-height: 0; margin-bottom: 0; }
.project-desc { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9rem; }
.image-placeholder { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: 1rem; color: var(--muted); font-size: 0.85rem; }

.article-content { overflow-wrap: anywhere; }
.article-content img { border-radius: 8px; }
.article-content video { display: block; max-width: 100%; height: auto; border-radius: 8px; }
code, pre { font-size: 0.9em; }
pre { padding: 1rem; overflow: auto; border-radius: 8px; background: var(--card-bg); line-height: 1.5; }
pre code { font-size: inherit; }
table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
th, td { border: 1px solid var(--rule); padding: 0.4rem 0.75rem; }

.site-footer { position: relative; min-height: 294px; display: flex; flex-direction: column; justify-content: flex-end; margin-top: 3rem; padding: 0 0 1rem; }
.site-bg { z-index: auto; }
.copyright { position: relative; }
.skip-link { position: absolute; left: 1rem; top: 1rem; padding: 0.5rem 1rem; background: var(--card-bg); transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: radial-gradient(circle at 50% calc(100% - var(--sun-bottom-offset)), #2d224a 0%, #241a3e 30%, #12152a 60%, #070a12 100%);
    --text: #e9e9ee;
    --muted: #b8b8c2;
    --card-bg: rgba(24, 24, 30, 0.7);
    --rule: rgba(255, 255, 255, 0.25);
  }
  .project-media { background: rgba(255, 255, 255, 0.04); }
  .site-bg { opacity: 0.9; }
  .site-bg circle { display: none; }
  .site-bg polygon { fill: #1a2130; }
}

@media (max-width: 700px) {
  .site-header { margin-top: clamp(16px, 6vh, 44px); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .card, .project-img { transition: none; }
  .card-link:hover .card { transform: none; }
}