/* Use the browser's normal scale. */
html {
  /* Keep the shared header aligned with the main site on short and long pages. */
  scrollbar-gutter: stable;
}

/* Secondary accent for dates, tags, categories, and other metadata */
:root {
  --secondary-accent: #888;
  --secondary-accent-alpha-70: rgba(136, 136, 136, 0.7);
  --secondary-accent-alpha-20: rgba(136, 136, 136, 0.2);
  --button-accent: #888;
  --button-accent-alpha-70: rgba(136, 136, 136, 0.7);
}

/* Post metadata (dates, author) */
.post-meta {
  color: var(--secondary-accent-alpha-70);
}

/* Tag and category links within post metadata */
.post-meta a {
  color: var(--secondary-accent);
}

.post-meta a:hover {
  color: var(--secondary-accent-alpha-70);
}

/* Footer copyright text */
.footer .copyright,
.footer .copyright--user {
  color: #999;
}
.footer .copyright a,
.footer .copyright--user a {
  color: #999;
}

/* === CLICKABLE POST CARDS === */
.post.on-list[data-href] {
  cursor: pointer;
  padding: 20px 12px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.05);
}

.post.on-list[data-href]:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

/* Project titles */
.post.on-list .post-title {
  font-size: 1.05rem;
}

.post-title a {
  color: #e5e5e5;
  transition: color 0.2s ease;
}

.post.on-list[data-href]:hover .post-title a {
  color: #fff;
}

/* Divider under title */
.post-title {
  --border: 1px solid #333;
}

/* Dim description text for hierarchy */
.post.on-list .post-content {
  color: #888;
}

/* Read more arrow: understated */
.read-more {
  color: var(--button-accent);
  font-size: 0.88rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.post.on-list[data-href]:hover .read-more {
  opacity: 1;
}

/* Cursor pointer on clickable elements */
a,
button,
.menu-trigger,
.pagination .button,
.post.on-list[data-href] {
  cursor: pointer;
}

/* Smooth transitions on links */
a {
  transition: color 0.2s ease;
}

/* Older / Newer pagination buttons */
.pagination .button a {
  color: var(--button-accent);
  transition: color 0.2s ease;
}

.pagination .button a:hover {
  color: var(--button-accent-alpha-70);
}

/* Nav hover */
.menu__inner a {
  transition: color 0.2s ease;
}

/* Make tables horizontally scrollable on mobile only */
@media (max-width: 768px) {
  .post-content {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table {
    min-width: 500px;
  }
}

/* Reduce space between pagination and posts */
.pagination {
  margin-top: 20px;
}

/* Vertically center the 404 message between header and footer */
.not-found {
  margin: auto;
}

/* Align the "tanush" logo flush with the article text below it */
.logo {
  padding-left: 0;
  padding-right: 0;
}

/* /brain/ — the graph renders straight onto the page background with no frame,
   panel or scroll container of its own. */
.brain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: none;
  border: 0;
  z-index: 0;
  touch-action: none; /* pan/zoom are driven by pointer handlers, not the browser */
}

/* Spinning coin — bottom-right corner of /brain/, /books/ and /music/. Size
   matches the sprite's own 24x25 grid at 3 CSS px per cell; the script scales
   for devicePixelRatio, so no image-rendering override is needed. The hop is
   driven by a cursor hit-test rather than :hover, so pointer-events can stay
   off and the coin never swallows clicks on the content beneath it. */
.corner-coin {
  position: fixed;
  bottom: 24px;
  right: 28px;
  width: 72px;
  height: 75px;
  z-index: 2;
  pointer-events: none;
}

/* Keep the logo and footer links clickable above the full-bleed canvas. */
.header,
.footer {
  position: relative;
  z-index: 1;
}


/* Leave room for the footer at the end of the document. */
body:has(.home-post) { position: relative; }
.container:has(.home-post) {
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 64px;
}
.container:has(.home-post) > .content { flex: 0 0 auto; }
.home-corner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  color: #f5f5f5;
  font-size: .75rem;
  line-height: 1.3;
}
.home-corner .copyright { margin: 0; font-size: .875rem; white-space: nowrap; }
.home-corner a,
.home-corner a:visited {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}
#home-ping {
  position: absolute;
  right: 16px;
  bottom: 0;
  font-size: .875rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  pointer-events: none;
}

.home-post {
  margin-bottom: 0;
}

/* Photos follow the home navigation with a fixed gap. */
.photo-grid {
  display: flex;
  gap: 14px;
  width: 100%;
  margin: 79px 0 0;
}

.photo-item {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: block;
}

.photo-item img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  image-rendering: auto;
}

.photo-item figcaption {
  font-size: 0.8rem;
  color: #888;
  text-align: center;
  margin-top: 6px;
  padding: 0;
  background: none;
  font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
}

@media (max-width: 684px) {
  .photo-grid {
    flex-direction: column;
  }
  .photo-item img {
    height: 200px;
  }
}

/* Home navigation: Notes follows Lists, with the photos below both. */
.home-links {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.home-links > section { min-width: 0; }
.home-links li + li { margin-top: 10px; }

/* Keep long equations and tables inside the reading column on phones. */
.research-note,
.research-note .post-content { min-width: 0; }
.research-note .post-meta { color: #999; }
.research-note .post-content { overflow-x: visible; }
.math-display {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25em 0;
}
.math-display .katex-display { margin: 0.75em 0; }
.note-table {
  max-width: 100%;
  overflow-x: auto;
}
.research-note table {
  width: 100%;
  min-width: 480px;
  font-size: 0.9rem;
}
.note-table:focus-visible { outline: 1px solid #999; outline-offset: 4px; }
.note-return { margin-top: 48px; }
.research-note .note-figure {
  display: block;
  width: 100%;
  margin: 32px 0;
}
.research-note .note-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  image-rendering: auto;
}
.research-note .note-figure figcaption {
  display: block;
  padding: 12px 0 0;
  background: none;
  color: #aaa;
  font-size: .85rem;
  line-height: 1.6;
  text-align: left;
}
@media (max-width: 683px) {
  .home-links h2 { margin-top: 30px; }
  .math-display .katex-display > .katex { text-align: left; }
}