/* Shared layout and semantic navigation. */
body { margin: 0; }
a { color: var(--link-color); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--link-color); outline-offset: 4px; }
[hidden] { display: none !important; }
.name a, .nav-item, .posts-list a { color: inherit; text-decoration: none; }
.nav-item, .posts-list a { display: block; }
.posts-list.open { max-height: none; }
.content { min-width: 0; max-width: 720px; padding: 2.5rem 3rem 5rem; overflow-wrap: anywhere; }
.content h3 { margin: 2rem 0 1rem; font-size: 1rem; color: var(--heading-color); }
.content h4 { margin: 1.5rem 0 .5rem; font-size: .95rem; color: var(--heading-color); }
.content ol { padding-left: 1.5rem; line-height: var(--content-line-height); }
.content blockquote { border-left: 2px solid var(--border-color); padding-left: 1rem; }
.content pre { overflow: auto; padding: 1rem; background: var(--border-color); }
.content img { object-fit: contain; }
.post-index { margin-top: 2.5rem; border-top: 1px solid var(--border-color); }
.post-index ul { list-style: none; padding-left: 0; }
.post-index li { margin-bottom: .75rem; }
.skip-link { position: fixed; left: 1rem; top: -100px; z-index: 10002; padding: .5rem 1rem; background: var(--bg-color); }
.skip-link:focus { top: .5rem; }
.draft-banner { padding: .75rem; border: 1px dashed var(--muted-color); }
.draft-label { font-size: .75rem; color: var(--muted-color); }

/* Keep the selector within the page in every theme and viewport. */
.themes-page { position: static; width: 100%; }
.themes-page .page-intro { margin-bottom: 1.5rem; color: var(--muted-color); line-height: 1.6; }
.themes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.theme-card { display: flex; align-items: stretch; justify-content: flex-start; text-align: left; height: auto; min-width: 0; padding: .65rem; gap: .7rem; background: var(--bg-color); color: var(--text-color); border: 1px solid var(--border-color); }
.theme-card.active { outline: 2px solid var(--heading-color); outline-offset: 2px; }
.theme-preview { display: flex; height: 80px; width: 100%; padding: 10px; gap: 10px; border-radius: 3px; background: #fff; border: 1px solid #e8e8e8; }
.mini-sidebar { display: block; width: 25%; border-right: 1px solid #ddd; }
.mini-content { display: flex; flex: 1; flex-direction: column; gap: 6px; padding-top: 5px; }
.mini-content i { display: block; width: 90%; height: 4px; background: #bbb; }
.mini-content i:first-child { width: 55%; height: 6px; background: #333; margin-bottom: 4px; }
.preview-geocities { background: #000080; border-color: #ff00ff; }
.preview-geocities .mini-sidebar { border-right: 2px dashed #ff00ff; }
.preview-geocities .mini-content i { background: #ffff00; }
.preview-geocities .mini-content i:first-child { background: #00ffff; }
.preview-notion { background: #fbfbfa; }
.preview-notion .mini-content { background: white; padding: 7px; }
.preview-win95 { background: #008080; }
.preview-win95 .mini-sidebar, .preview-win95 .mini-content { background: #c0c0c0; border: 2px outset #eee; }
.preview-win95 .mini-content { padding: 4px; }
.preview-win95 .mini-content i:first-child { background: #000080; width: 100%; }
.theme-label { display:flex; justify-content:space-between; gap:.5rem; font-size: .9rem; }
.theme-check { visibility: hidden; }
.theme-card.active .theme-check { visibility: visible; }
.theme-description { font-size: .8rem; line-height: 1.5; opacity: .8; }
:root.theme-geocities .content a { color:var(--link-color); }
:root.theme-notion { --border-color:#e9e9e7; --muted-color:#74736f; }
:root.theme-notion .content { margin-left:220px; }
:root.theme-win95 .content { max-width:640px; background:#fff; }
:root.theme-win95 .name a { color:#fff; }
:root.theme-win95 .content > :not(.themes-page) { padding-left:1rem; padding-right:1rem; }
:root.theme-win95 .content > .themes-page { padding:1rem; background:#c0c0c0; }
:root.theme-win95 .themes-page p { background:transparent; padding:0; }
:root.theme-win95 .content article { padding-bottom:1rem; }
:root.theme-win95 .content article p { padding:.5rem 0; }
:root.theme-win95 .post-index { padding-bottom:.5rem; }
:root.theme-win95 .menu-toggle { background:#c0c0c0; }
@media(max-width:768px) {
  .sidebar { width:220px; padding-top:4rem; }
  .content, :root.theme-notion .content { margin-left:0; max-width:100%; width:100%; padding:4.75rem 1.25rem 3rem; }
  :root.theme-notion .sidebar { width:220px; padding-top:4rem; }
  :root.theme-win95 { padding:4.25rem .75rem 1rem; }
  :root.theme-win95 .sidebar { width:220px; padding-top:4rem; }
  :root.theme-win95 .content { width:100%; max-width:100%; margin:0; }
  .themes-grid { gap:.75rem; }
}
@media(max-width:360px) { .themes-grid { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
.post-date { display:block; color:var(--muted-color); font-size:.85rem; margin:.25rem 0 1.25rem; }
.post-index .post-date { margin:.15rem 0 .6rem; }