/* Scale page to 80% (zoom for Chrome/Edge/Safari, transform for Firefox) */
html {
  zoom: 0.8;
  /* Keep the shared header aligned with the main site on short and long pages. */
  scrollbar-gutter: stable;
}

@supports not (zoom: 0.8) {
  html {
    transform: scale(0.8);
    transform-origin: top left;
    width: 125%;
  }
}

/* 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;
}


/* Home page spacing.

   The page ends after its content rather than stretching the footer to the
   bottom of the viewport, so the gaps around the photos are a fixed size and
   the layout reads the same on a laptop and on a large monitor. Dropping the
   min-height is what releases the footer; the elastic auto-margin approach it
   replaces grew both gaps in proportion to the window height. */
.container:has(.home-post) {
  min-height: auto;
}

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

/* Side-by-side photo grid on the home page.
   79px was measured in-browser rather than derived: it matches the ~66px that
   sits below the captions (article padding 20px + footer padding 40px, plus
   line-height leading) once the page's zoom: 0.8 is accounted for. */
.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 {
  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 sits beside Lists and stacks on narrow screens. */
.home-links {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 64px;
}
.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 { grid-template-columns: 1fr; gap: 0; }
  .home-links h2 { margin-top: 30px; }
  .math-display .katex-display > .katex { text-align: left; }
}