/* Shared Niku interface for section pages and article reading. */
@font-face {
  font-family: "DotGothic16";
  src: url("../fonts/DotGothic16-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --site-paper: #fff;
  --site-ink: #111;
  --site-muted: #555;
  --site-line: #111;
  --site-display: "DotGothic16", ui-monospace, Consolas, "Microsoft YaHei", monospace;
  --site-copy: ui-sans-serif, system-ui, "Microsoft YaHei", sans-serif;
}
.site-page {
  --reading-bg: var(--site-paper);
  --reading-ink: var(--site-ink);
  --reading-muted: var(--site-muted);
  --reading-line: var(--site-line);
  color: var(--site-ink);
  background: var(--site-paper);
  font: 1rem/1.625 var(--site-copy);
  position: relative;
  isolation: isolate;
}
.site-backdrop { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.site-page > .site-header, .site-page > .reading-layout, .site-page > .gallery-main { position: relative; z-index: 1; }
.site-page [hidden] { display: none !important; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  width: calc(100% - 48px);
  max-width: 1200px;
  margin: 24px auto 0;
  padding: 1rem 1.5rem;
  border: 4px solid var(--site-ink);
  background: var(--site-paper);
}
.site-header.reading-mobile-header { display: block; }
.site-header .reading-mobile-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; min-height: 44px; }
.site-header .site-brand { display: flex; align-items: baseline; gap: .8rem; min-height: 44px; color: var(--site-ink); text-decoration: none; }
.site-brand span { font: 700 28px/1 system-ui, sans-serif; letter-spacing: -1px; }
.site-brand small { font: 14px/1.5 var(--site-display); color: var(--site-ink); }
.site-navigation { display: flex; align-items: center; gap: .625rem; }
.site-navigation a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .25rem .625rem; border: 2px solid var(--site-ink); color: var(--site-ink); background: var(--site-paper); font: 18px/1.4 var(--site-display); text-decoration: none; }
.site-navigation a[aria-current="page"], .site-navigation a:hover { color: var(--site-paper); background: var(--site-ink); text-decoration: none; }
.site-header .site-menu-toggle { display: none; min-height: 44px; min-width: 64px; padding: .5rem .75rem; border: 2px solid var(--site-ink); border-radius: 0; color: var(--site-ink); background: var(--site-paper); font: 16px/1.4 var(--site-display); cursor: pointer; }
.site-skip { position: absolute; top: -5rem; left: 1rem; z-index: 90; padding: .75rem; border: 2px solid var(--site-ink); color: var(--site-ink); background: var(--site-paper); }
.site-skip:focus { top: .5rem; }
.site-page a:focus-visible, .site-page button:focus-visible { outline: 3px solid var(--site-ink); outline-offset: 5px; }
.site-page .reading-layout { grid-template-columns: minmax(0, 48rem) 11rem; gap: 3.5rem; max-width: 75rem; padding: 3rem 3rem 5rem; min-height: calc(100svh - 92px); }
.site-page .reading-left { display: none; }
.site-page .reading-main, .site-page .article-manuscript { padding: 2rem; border: 4px solid var(--site-ink); background: var(--site-paper); }
.site-page .reading-right { align-self: start; padding: 1rem; border: 4px solid var(--site-ink); background: var(--site-paper); }
.site-page .reading-right > :first-child { margin-top: 0; }
.site-page .reading-rail-label { font: 18px/1.5 var(--site-display); color: var(--site-ink); }
.site-page [data-reading-toc] a { min-height: 44px; font: 16px/1.5 var(--site-display); color: var(--site-ink); }
.site-page [data-reading-toc] a[aria-current="location"] { border-bottom: 2px solid var(--site-ink); }
.site-page .reading-page-heading, .site-page[data-section="writing"] .reading-page-heading { margin-bottom: 2.5rem; padding-top: 0; }
.site-page .reading-kicker { margin-bottom: 1rem; font: 18px/1.5 var(--site-display); }
.site-page .reading-page-heading h1, .site-page[data-section="writing"] .reading-page-heading h1, .site-page .gallery-heading h1, .site-page .reading-article-heading h1 {
  width: fit-content;
  max-width: 100%;
  padding: .35rem .65rem;
  margin: 0 0 1.25rem;
  color: var(--site-paper);
  background: var(--site-ink);
  font: 400 36px/1.25 var(--site-display);
  letter-spacing: 0;
  box-shadow: 4px 4px 0 var(--site-paper), 4px 4px 0 3px var(--site-ink);
  overflow-wrap: anywhere;
}
.site-page .page-sections > section > h2 { padding-left: .625rem; border-left: 4px solid var(--site-ink); font: 400 26px/1.4 var(--site-display); }
.site-page .page-sections h3, .site-page .writing-entry h2 { font: 400 20px/1.5 var(--site-display); }
.site-page .writing-entry { border-bottom-width: 2px; }
.site-page .writing-entry-meta, .site-page .writing-filter-status { font-family: var(--site-display); }
.site-page .writing-filters button { min-height: 44px; padding: .5rem .625rem; border: 2px solid var(--site-ink); margin-bottom: .625rem; color: var(--site-ink); font-family: var(--site-display); }
.site-page .writing-filters button[aria-pressed="true"], .site-page .writing-mobile-filters button[aria-pressed="true"] { color: var(--site-paper); background: var(--site-ink); }
.site-page .reading-prose pre { background: #f5f5f5; }
.site-page .project-screenshot-placeholder { border: 3px solid var(--site-ink); }
.site-page .about-statement { font-family: var(--site-copy); }
.site-page .reading-mobile-directory > button { border: 2px solid var(--site-ink); padding: .6rem .75rem; font-family: var(--site-display); }
.site-page [data-mobile-toc] a { font-family: var(--site-display); }
.site-page .writing-mobile-filters button { min-width: 64px; padding: .5rem .75rem; border: 2px solid var(--site-ink); color: var(--site-ink); font-family: var(--site-display); }
.site-page .gallery-main { max-width: 1296px; margin: 0 auto; padding-top: 3rem; }
.site-page .gallery-heading { width: min(1100px, 100%); padding: 1.5rem; border: 4px solid var(--site-ink); background: var(--site-paper); }
.site-page .gallery-footnote { padding: .75rem 1rem; border: 3px solid var(--site-ink); background: var(--site-paper); }
.site-page .gallery-heading p, .site-page .gallery-footnote { color: var(--site-muted); }
@media (max-width: 1100px) {
  .site-page .reading-layout { grid-template-columns: minmax(0, 48rem); max-width: 52rem; gap: 0; padding: 2.5rem 2rem 5rem; }
  .site-page .reading-right { display: none; }
}
@media (max-width: 760px) {
  .site-header { padding: .75rem 1rem; }
  .site-navigation { display: none; }
  .site-header .site-menu-toggle { display: block; }
  .site-header [data-mobile-navigation] { flex-basis: 100%; width: 100%; margin-top: .75rem; padding: .5rem 0 0; border-top: 2px solid var(--site-ink); border-bottom: 0; }
  .site-header [data-mobile-navigation] a { display: flex; align-items: center; min-height: 48px; margin-top: .5rem; padding: .5rem .75rem; border: 2px solid var(--site-ink); color: var(--site-ink); background: var(--site-paper); font: 18px/1.5 var(--site-display); text-decoration: none; }
  .site-header [data-mobile-navigation] a[aria-current="page"] { color: var(--site-paper); background: var(--site-ink); text-decoration: none; }
  .site-page .reading-layout { display: block; padding: 1.5rem 1.5rem 4rem; min-height: auto; }
  .site-page .reading-main, .site-page .article-manuscript { padding: 1.25rem; }
  .site-page .reading-page-heading, .site-page[data-section="writing"] .reading-page-heading { margin-bottom: 1.5rem; }
  .site-page .reading-kicker { margin-bottom: .75rem; }
  .site-page .reading-page-heading h1, .site-page[data-section="writing"] .reading-page-heading h1, .site-page .gallery-heading h1, .site-page .reading-article-heading h1 { font-size: 28px; }
  .site-page .page-sections > section > h2 { font-size: 22px; }
  .site-page .page-sections h3 { font-size: 18px; }
  .site-page .gallery-main { padding-top: 1.5rem; }
}

.site-page .article-header-return { font-size: 14px; min-height: 44px; display: flex; align-items: center; }
.site-page .article-body h2 { border-left: 4px solid var(--site-ink); padding-left: .625rem; font: 400 24px/1.4 var(--site-display); margin-top: 2rem; }
.site-page .article-body h3 { font: 400 20px/1.5 var(--site-display); }
@media (max-width: 760px) { .site-page .article-body h2 { font-size: 21px; } .site-page .article-header-return { order: 3; flex-basis: 100%; min-height: 24px; } }