/* Scale page to 80% (zoom for Chrome/Edge/Safari, transform for Firefox) */
html {
  zoom: 0.8;
}

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

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