/*
  Indexhibit-inspired stylesheet (ported from ndxzsite/default: reset + base + style)
  Kept intentionally minimal: fixed left index rail + wide content column.
*/

/* --- reset (Eric Meyer, public domain) --- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

/* --- base --- */
html, body { height: 100%; }
body {
  font-size: 16px;
  font-family: 'Helvetica Neue', Arial, Helvetica, Verdana, sans-serif;
  color: #000;
  line-height: 1.4em;
  background: #fff;
  /* font-weight: 300; */
}

/* sketchbook dot grid (drawn by js/grid.js) */
#grid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  pointer-events: none;
}

/* link scheme */
a:link    { text-decoration: none; color: blue; }
a:visited { text-decoration: none; color: #888888; }
a:hover   { text-decoration: underline; }
a:active  { text-decoration: none; color: #00cc00; }
a img { border: none; }

small { font-size: 9px; }
code { font-family: monospace; }
blockquote { padding-left: 9px; }

/* headings stay quiet — Indexhibit is typography-led, not heading-led */
h1, h2, h3, h4 { font-size: 16px; margin-bottom: 1em; font-weight: bold; }

/* paragraph width */
#index p { margin-bottom: 1em; }
#exhibit p, #exhibit code, #exhibit blockquote { width: 600px; max-width: 100%; margin-bottom: 1em; }

/* highlighter style — maybe you want to change colors? */
.highlight { background: #ccff00; color: #000; }

/* never adjust the margin or padding here unless you seriously know what you are doing
   think #index .container and #exhibit .container for only padding adjustments */
#index { width: 215px; background: #fff; }
#index {
  overflow: auto;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  height: 100%;
  z-index: 1;
}
#exhibit { margin: 0 0 0 215px; min-height: 100vh; }
.container { padding: 27px 9px 25px 27px; }

/* --- the index (left rail) --- */
#index h1 { font-size: 16px; font-weight: bold; margin-bottom: 1.2em; }
#index h1 a { font-weight: bold; text-decoration: none; color: #000; }

#index ul.section { list-style: none; margin: 0 0 1em 0; }
#index ul.subsection { list-style: none; margin-left: 10px; }

#index ul.section span.section_title,
#index ul.section span.section_title a {
  color: #000;
  cursor: pointer;
  font-weight: normal;
}
#index ul.section span.section_title:hover { text-decoration: underline; }
#index .subsection_title { font-weight: bold; cursor: pointer; }

#index ul li.exhibit_title a:link    { text-decoration: none; }
#index ul li.exhibit_title a:hover   { text-decoration: underline; }
#index ul li.exhibit_title a:visited { color: #888; }
#index ul.section li.exhibit_title:hover { text-indent: 2px; }

/* active exhibit / section */
li.active a:link, li a.active, li.active a:hover,
li.active a:active, li.active a:visited,
#index ul.section li.active a:link,
#index ul.section li.active a:hover { font-weight: bold; color: #00f; }

/* the "NEW" indicator */
sup.new_exhibit {
  color: #0c0; font-weight: bold; text-transform: uppercase;
  font-size: 8px; vertical-align: top;
}
sup.new_exhibit::before { content: "New"; }

#index .bot { font-size: 0.7em; color: #888; margin-top: 2em; }

/* --- tags (in the index rail and on exhibit pages) --- */
#index ul#all_tags { list-style-type: none; margin-bottom: 1em; }
#index ul#all_tags li { display: inline; margin-right: 3px; }
#index ul#all_tags li a { font-size: 0.9em; }
#exhibit .tags { margin-top: 2em; }
#exhibit .tags a { display: inline-block; margin-right: 8px; font-size: 0.75em; color: #888; }

/* --- content pane --- */
.home-intro { margin-bottom: 2em; }
.home-intro p { width: 600px; max-width: 100%; }
.section-heading { font-weight: normal; font-size: 0.7em; font-style: italic; margin-bottom: 1.2em; }
.sep { margin: 2em 0 0.5em; }
.home-contact { margin-top: 3em; font-size: 0.7em; font-style: italic; color: #888; }

/* titles and captions (not mobile) */
.title, .caption { font-size: 0.7em; font-style: italic; line-height: 1.2em; }
.captioning { margin-top: 2px; }

/* --- visual index (home + section grids) --- */
#visual-index { column-count: 3; column-gap: 20px; }
#visual-index a.item { display: block; margin-bottom: 20px; break-inside: avoid; }
#visual-index a.item img { width: 100%; height: auto; display: block; border: 1px solid #ddd; background: #fafafa; }
#visual-index a.item.no-image { border: 1px solid #ddd; padding: 18px; background: #fafafa; min-height: 120px; }
#visual-index a.item .title { font-size: 13px; font-style: normal; color: #000; }
#visual-index a.item .caption { font-size: 11px; color: #888; }
#visual-index a.item:hover img { opacity: 0.85; }

/* --- single exhibit --- */
#exhibit .media { margin-bottom: 1em; }

/* diptych: panels edge to edge; images at natural size, capped by max-height (not shrunk) */
#exhibit .dyptych { display: flex; align-items: flex-start; margin-bottom: 1em; }
#exhibit .dyptych .media { margin-bottom: 0; }
#exhibit .dyptych .media img { border: none; }
#exhibit .media img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 60px); border: 1px solid #eee; }
#exhibit .meta { font-size: 0.7em; color: #888; font-style: italic; margin-top: 1.5em; }

/* --- journal entries (home "recently" + /2025/) --- */
.entry { margin-bottom: 2.4em; }
.entry .when { font-size: 11px; letter-spacing: 0.06em; color: #888; margin-bottom: 0.3em; }
.entry p { margin-bottom: 0.8em; }

/* --- previous / next pager --- */
.pager { margin-top: 2em; display: flex; justify-content: space-between; font-size: 0.75em; font-style: italic; }
.pager a { color: #888; }
.pager a:hover { color: #000; text-decoration: none; }

/* --- notes --- */
.note-list { list-style: none; margin-top: 1em; }
.note-list li { margin-bottom: 0.6em; }
.note-list .date { font-size: 0.7em; color: #888; margin-left: 0.5em; }
#exhibit article.note h1.title { font-size: 1.4em; }

/* --- narrow screens: stack the rail on top --- */
@media (max-width: 720px) {
  #index { position: static; width: 100%; height: auto; border-bottom: 1px solid #eee; }
  #exhibit { margin-left: 0; }
  #exhibit p, #exhibit code, #exhibit blockquote,
  #exhibit .media img, .home-intro p { width: auto; max-width: 100%; }
  #exhibit .dyptych { display: block; align-items: flex-start; }
  #exhibit .dyptych .media { margin-bottom: 1em; }
  #visual-index { column-count: 1; }
}