:root {
  --bg: #dadffd;
  --text: #000000;
  --muted: #586069;
  --accent: #1736fd;
  --border: #1736fd;
  --code-bg: #f6f8fa;
  --title-color: #1736fd; /* font color of each page's title (the md `title`) */

  /* --- Layout knobs (tweak these) --- */
  --sidebar-width: 20rem; /* width of the left bar */
  --sidebar-left: 1rem; /* gap between the left bar and the screen's left edge (left page padding) */
  --nav-gap: 0.6rem; /* base spacing between sidebar items (add per-item space with `gapBefore` front matter) */
  --content-gap: 0.5rem; /* gap between the left bar and the content */
  --content-max: 48rem; /* max width of the main content column */
  --content-min: 30rem; /* text width the gallery shrinks around before the text itself gives */
  --page-padding-y: 1rem; /* space above & below the boxes */
  --page-padding-right: 1rem; /* space to the right of the content box */

  /* --- Box knobs (tweak these) --- */
  --box-border-width: 1px; /* line width of the box borders */
  --box-radius: 0px; /* corner rounding of the boxes */
  --box-padding: 0.7rem; /* inner spacing inside each box */
  --box-bg: #ffffff; /* background fill inside every box */
  --gallery-width: 40rem; /* default width of the images box; override per page with `galleryWidth` front matter */
  --gallery-shrink: 1.5; /* how hard the gallery yields width vs the text (higher = yields faster) */
  --gallery-padding: 0rem; /* inner padding of each gallery image box */
  --gallery-caption-inset: 0.5rem; /* gap between the subtitle box and the image's top-right corner */

  /* --- Levedad archive (tweak these) --- */
  --archive-max-cols: 2; /* never more than this many columns */
  --archive-col: 42rem; /* min width per column: it stays 1 column until the content area is about 2x this wide, then splits to 2. Raise to require a wider screen before splitting; lower to split sooner. */
  --archive-gap: var(--content-gap); /* space between picture cards */

  /* --- Type knobs (tweak these) --- */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif; /* main font for body text */
  --font-title: var(--font); /* page titles + headings — override to pair a display font */

  /* --- Responsive --- */
  /* The mobile breakpoint is NOT a variable: CSS can't use custom properties
     inside @media. Tune it at the `max-width` in the @media rule at the very
     bottom of this file (currently 640px). */
}

/*@media (prefers-color-scheme: dark) {*/
/*  :root {*/
/*    --bg: #0d1117;*/
/*    --text: #e6edf3;*/
/*    --muted: #8b949e;*/
/*    --accent: #1736fd;*/
/*    --border: #1736fd;*/
/*    --code-bg: #161b22;*/
/*  }*/
/*}*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* --- Two-column layout --- */
.layout {
  display: flex;
  gap: var(--content-gap);
  /* No max-width / auto margins: the bar hugs the screen's left edge.
     Left padding = --sidebar-left so you can nudge it off the edge. */
  padding: var(--page-padding-y) var(--page-padding-right) var(--page-padding-y)
    var(--sidebar-left);
  /* Don't stretch short columns to match the tallest — each box is its own
     height, capped at the viewport (rule below). */
  align-items: flex-start;
}

/* Each box grows with its content but never past the viewport: taller-than-
   screen content scrolls inside the box (like before); shorter content just
   makes a shorter box. */
.sidebar,
.content,
.gallery {
  max-height: calc(100vh - 2 * var(--page-padding-y));
}

.sidebar {
  flex: 0 0 var(--sidebar-width);
  /* A transparent scroll column — the logo and the info each carry their own box. */
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  /* Right-align all the bar's text against its right edge. */
  text-align: right;
  /* Hide the scrollbar but keep it scrollable (Firefox). */
  scrollbar-width: none;
}
/* Hide the scrollbar in Chrome / Edge / Safari too. */
.sidebar::-webkit-scrollbar {
  display: none;
}
/* Logo box */
.sidebar__logo {
  display: block;
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: 0 /* var(--box-padding);*/
}
.sidebar__logo img {
  display: block;
  width: 100%;
  height: auto;
}
/* Items box (nav) — grows to fill the column down to the bottom of the screen. */
.sidebar__info {
  flex: 1 0 auto;
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
}
.sidebar__info > :first-child {
  margin-top: 0;
}
.sidebar__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nav-gap);
}
/* Sidebar links: black by default; the hovered/active one turns blue + underline. */
.sidebar__nav a {
  color: var(--text);
}
.sidebar__nav a:hover,
.sidebar__nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
}

.content {
  /* Grow to fill the row, but resist shrinking so the text keeps priority
     over the gallery as the window narrows (see .gallery's high shrink). */
  flex: 1 1 var(--content-min);
  min-width: 0;
  /*max-width: var(--content-max);*/
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
  /* Frame: scroll inside the box instead of growing the page. */
  overflow-y: auto;
  min-height: 0;
  /* Keep it scrollable but hide the scrollbar (Firefox). */
  scrollbar-width: none;
}
/* Hide the scrollbar in Chrome / Edge / Safari too. */
.content::-webkit-scrollbar {
  display: none;
}
.content > :first-child {
  margin-top: 0;
}
/* Boxless content area (front matter `bareContent: true`): drops the white box
   so children sit directly on the page — like the gallery, where each item is
   its own box. Used by the levedad archive. */
.content--bare {
  background: none;
  border: none;
  padding: 0;
}
/* On a bare page the title keeps its own box, so it still reads as a normal
   page title sitting above the boxless content. */
.content--bare .item-title {
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
}

/* --- Gallery (third column, right side) --- */
.gallery {
  /* Sits at --gallery-width when there's room, but its high shrink factor
     means it yields width before the text box does. */
  flex: 0 var(--gallery-shrink) var(--gallery-width);
  min-width: 0;
  /* A transparent scroll column — each image carries its own box. */
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--content-gap);
  /* Hide the scrollbar but keep it scrollable (Firefox). */
  scrollbar-width: none;
}
/* Hide the scrollbar in Chrome / Edge / Safari too. */
.gallery::-webkit-scrollbar {
  display: none;
}
/* Each picture is its own box; an optional subtitle overlays the image in its
   top-right corner as a small white box with a blue outline. */
.gallery__item {
  position: relative; /* anchor for the overlaid subtitle */
  margin: 0;
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: var(--gallery-padding);
  overflow: hidden; /* clip the image to rounded corners when --box-radius > 0 */
  /* `overflow: hidden` zeroes the flex item's automatic min-height, which would
     let the column squish the images to fit; keep them at full height and let
     the gallery column scroll instead. */
  flex-shrink: 0;
}
/* Images and self-hosted videos fill the box width at their natural aspect. */
.gallery__img,
.gallery__video {
  display: block;
  width: 100%;
  height: auto;
}
/* A YouTube embed has no intrinsic size, so give it a fixed 16:9 box. */
.gallery__embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}
.gallery__caption {
  position: absolute;
  right: var(--gallery-caption-inset);
  top: var(--gallery-caption-inset);
  max-width: calc(100% - 2 * var(--gallery-caption-inset));
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: 0.1rem 0.4rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text);
}

/* --- Typography --- */
h1,
h2,
h3 {
  font-family: var(--font-title);
  line-height: 1.25;
}
h1 {
  font-size: 2rem;
  margin-top: 0;
}
/* Each page's title (the md `title`), rendered by item.njk. */
.item-title {
  color: var(--title-color);
  text-decoration: underline;
}

/* Markdown `---` line separators — same color/thickness as the box outlines. */
hr {
  border: none;
  border-top: var(--box-border-width) solid var(--border);
  margin: 1.5rem 0;
}

/* --- Levedad picture archive (built by /js/levedad-archive.js) --- */
/* Masonry-style columns: as many ~--archive-col-wide columns as fit (one when
   narrow), each card its own box like the gallery images. Columns suit the
   uncropped, variable-height pictures — they pack without leaving row gaps. */
.archive {
  /* up to --archive-max-cols columns, each at least --archive-col wide */
  columns: var(--archive-max-cols) var(--archive-col);
  column-gap: var(--archive-gap);
  margin-top: 1rem;
}
.archive__item {
  break-inside: avoid; /* keep each picture + caption together in one column */
  margin: 0 0 var(--archive-gap);
  background: var(--box-bg);
  border: var(--box-border-width) solid var(--border);
  border-radius: var(--box-radius);
  padding: var(--box-padding);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}
/* Full-width and uncropped: every picture spans the column, natural height. */
.archive__img {
  width: 100%;
  height: auto;
  display: block;
}
.archive__caption {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.archive__title {
  font-style: italic;
  font-weight: bold;
}
.archive__desc {
  font-size: 0.85rem;
  color: var(--muted);
}

/* --- Projects --- */
.projects,
.posts {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}
.project {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.project__title {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
}
.tag {
  font-size: 0.8rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.6rem;
}

/* --- Blog list --- */
.post-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.25rem 1rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.75rem;
}
.post-item time {
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- Blog post --- */
.post__header time {
  color: var(--muted);
}
.post__back {
  margin-top: 2.5rem;
}

/* --- Media & code --- */
img {
  max-width: 100%;
  height: auto;
}
code {
  background: var(--code-bg);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-size: 0.9em;
}
pre {
  background: var(--code-bg);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
}
pre code {
  background: none;
  padding: 0;
}

/* --- Responsive: stack on narrow screens --- */
/* === Mobile breakpoint: below this width the columns stack. Tune this number. === */
@media (max-width: 640px) {
  .layout {
    flex-direction: column;
    gap: var(--content-gap);
    padding: var(--page-padding-y) var(--sidebar-left);
    /* Stacked view scrolls the page normally — no fixed frames. */
    height: auto;
  }
  /* Each box spans the full width and is only as tall as its own content,
     so nothing is clipped and the gallery can't overlap the text. */
  .sidebar,
  .content,
  .gallery {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    max-height: none; /* no viewport cap on mobile — boxes grow, page scrolls */
    overflow: visible;
    min-height: 0;
  }
}