/* =============================================================
   Nate Beaty — site.css
   Mobile-first. Token-driven. CUBE-ish: tokens → reset →
   composition (.flow, eyebrow) → blocks → desktop layer.
   Reset adapted from https://piccalil.li/blog/a-more-modern-css-reset/
   ============================================================= */

/* --- Design tokens ------------------------------------------ */

:root {
  /* Color (semantic — the dark-mode seam) */
  --bg: #fff;
  --fg: #1a1a1a;          /* body text (was #000 / #1a1a1a) */
  --muted: #888;          /* secondary text (was #888 / #999) */
  --faint: #aaa;          /* tertiary text (was #aaa / #b3b3b3) */
  --line: #e8e8e8;        /* hairlines (was #eee / #ededed) */
  --rule: #222;           /* strong borders (was #222 / #333) */
  --surface: #eee;        /* tag / footer / sidebar fill */
  --surface-border: #ccc;
  --red: #FC2288;         /* accent + hover */

  /* Spacing scale (near-duplicates snapped to these) */
  --sp-3xs: 3px;          /* 2/3 */
  --sp-2xs: 5px;          /* 4/5/6 */
  --sp-xs: 8px;
  --sp-s: 13px;           /* 10/12/13/14 */
  --sp-m: 16px;
  --sp-l: 21px;           /* 20/21/24 */
  --sp-xl: 34px;
  --sp-2xl: 40px;
  --gutter: var(--sp-l);  /* page padding — bumped to --sp-2xl on desktop */
  --content-max: 960px;   /* centered text column */
  /* Width for centered columns: caps at --content-max, but keeps a --gutter of
     breathing room each side while narrower. The gutter lives outside the cap,
     so the content uses the full 960 once it hits it (no padding eating in). */
  --content-w: min(var(--content-max), 100% - 2 * var(--gutter));
  --flow-space: 1em;

  /* Type */
  --font-serif: "Libre Baskerville", serif;
  --font-wayfinding: "National Park", sans-serif;
  --font-sans: "Oswald", sans-serif;
  --lsp: 0.2em;                 /* wayfinding letter-spacing */
  --fs-eyebrow: 10px;          /* 9/10/11 */
  /* Eyebrow/label shorthand (size/line-height/family). Pair with
     text-transform: uppercase + letter-spacing: var(--lsp); color set per use. */
  --font-eyebrow: var(--fs-eyebrow)/1 var(--font-wayfinding);
  --fs-label: 13px;
  --fs-sm: 15px;
  --fs-base: 18px;
  --fs-lg: 20px;
  --fs-root: 24px;
  --fs-h2: 28px;
  --fs-h1: 36px;

  /* Layout */
  --navWidth: 200px;
  --topbar-h: 90px;            /* mobile content clearance below the floating top bar */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --fg: #e8e8e8;
    --muted: #9a9a9a;
    --faint: #6f6f6f;
    --line: #2a2a2a;
    --rule: #3a3a3a;
    --surface: #1e1e1e;
    --surface-border: #333;
  }
}

/* --- Reset & element defaults ------------------------------- */

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

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd { margin-block-end: 0; }
figure { margin: 0; }

ul[role='list'], ol[role='list'] { list-style: none; }

body {
  margin: 0;
  min-height: 100vh;
  line-height: 1.5;
  font-family: var(--font-serif);
  font-size: var(--fs-root);
  background: var(--bg);
  color: var(--fg);
  /* Disable Android Chrome's native pull-to-refresh so our custom
     pull-to-spin gesture owns the over-the-top drag (keeps iOS bounce). */
  overscroll-behavior-y: contain;
}

h1, h2, h3, h4, button, input, label { line-height: 1.1; }
h1, h2, h3, h4 { text-wrap: balance; }

h1 { margin: 0; padding: 0; }

a:not([class]) {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  color: currentColor;
  &:hover { color: var(--red); }
}

img, picture, video {
  max-width: 100%;
  display: block;
  height: auto;
}

input, button, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

textarea:not([rows]) { min-height: 10em; }

:target { scroll-margin-block: 5ex; }

[hidden] { display: none !important; }

main { position: relative; }

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
  animation-timing-function: ease-in-out;
}

/* --- Composition: flow + eyebrow ---------------------------- */

/* Andy Bell flow — vertical rhythm via owl selector */
.flow > * + * { margin-top: var(--flow-space); }

/* Wayfinding "eyebrow" type — one rule for the ~10 places that
   share uppercase National Park lettering; callers set size/color */
.wayfinding-font,
.section-label,
.mobile-bar__section,
.page-heading,
.site-footer a,
.single-main article .date,
.single-main article .tags a,
.photo-single .photo-single-meta .date,
.photo-single .photo-single-meta .tags a,
.journal-list .date,
.tagged-list .date {
  font-family: var(--font-wayfinding);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--lsp);
}

/* --- Sidebar (desktop nav rail) ----------------------------- */

.sidebar {
  display: none;                /* mobile: hidden, replaced by .mobile-bar */
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 100;
  width: var(--navWidth);
  height: 100vh;
  padding: var(--sp-l) var(--sp-l);
  flex-direction: column;
  align-items: flex-start;

  .logo { width: 100%; height: auto; display: block; max-width: 300px; margin: auto; }
}

.sidebar--solid {
  background: var(--surface);
  border-right: 1px solid var(--rule);
}

.sidebar--overlay {
  background: transparent;
  border-right: none;
  width: 320px;

  .hand-nav {
    background: #000;
    padding: var(--sp-l);
    width: 60%;
    max-width: 190px;
    box-shadow: 0 0 30px rgba(200, 0, 0, 0.5);
  }
  .hand-nav a {
    background-color: #fff;
    &:hover { background-color: var(--red); }
  }
}

.logo-link {
  display: block; margin-bottom: var(--sp-xs);
  filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.4));
  &:hover {
    filter: drop-shadow(0 0 50px rgba(255, 255, 255, 0.5));
  }
}

/* Hand-drawn nav (mask images tinted via background-color) */
.hand-nav {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: var(--sp-l) auto;

  a {
    display: block;
    color: transparent;
    text-decoration: none;
    background-color: var(--fg);
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    overflow: hidden;

    + a { margin-top: var(--sp-2xs); }
    &:hover, &.current { background-color: var(--red); }
  }
}

.hand-nav-featured { mask-image: url('/assets/images/hand-nav-featured.png'); aspect-ratio: 317/63; }
.hand-nav-photos   { mask-image: url('/assets/images/hand-nav-photos.png');   aspect-ratio: 317/69; }
.hand-nav-comics   { mask-image: url('/assets/images/hand-nav-comics.png');   aspect-ratio: 317/71; }
.hand-nav-drawings { mask-image: url('/assets/images/hand-nav-drawings.png'); aspect-ratio: 317/73; }
.hand-nav-journal  { mask-image: url('/assets/images/hand-nav-journal.png');  aspect-ratio: 317/71; }
.hand-nav-about    { mask-image: url('/assets/images/hand-nav-about.png');    aspect-ratio: 317/64; }

/* --- Mobile top bar + menu overlay -------------------------- */

.mobile-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-s);
  padding: var(--sp-2xs) var(--gutter);
}

/* Matches .section-label exactly (it stands in for the in-page section
   eyebrow, which is hidden on mobile). justify-self places it in the bar grid. */
.mobile-bar__section {
  font-size: var(--fs-label);
  color: var(--faint);
  text-decoration: none;
  justify-self: start;
  &:hover { color: #555; }
}

.mobile-bar__logo {
  justify-self: center;
  display: block;
  img { width: 75px; height: 75px; }
  filter: drop-shadow(0 0 30px rgba(255, 255, 255, 0.5));
}

/* Pull-to-spin logo (mobile): JS sets --logo-spin live while you rubberband
   past the top; on release .is-spinning runs a 2s roulette-style spin-down
   (ease-out deceleration). Rotating the <img> itself leaves the homepage
   logo's translateX centering (on the parent .logo-link) untouched. */
.mobile-bar__logo img,
.sidebar--overlay .logo {
  transform: rotate(var(--logo-spin, 0deg));
}
@media (prefers-reduced-motion: no-preference) {
  .mobile-bar__logo img.is-spinning,
  .sidebar--overlay .logo.is-spinning {
    transition: transform 2s cubic-bezier(0.18, 0.7, 0.16, 1);
  }
}

.mobile-bar__menu {
  justify-self: end;
  background: none;
  border: 1px solid var(--surface-border);
  border-radius: 5px;
  padding: var(--sp-s) var(--sp-m);
  font: var(--font-eyebrow);
  font-size: var(--fs-label);
  letter-spacing: var(--lsp);
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  background: var(--fg);
  color: var(--bg);
  &:hover { border-color: var(--red); color: var(--red); }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;

  &[hidden] { display: none; }

  .hand-nav {
    width: min(70%, 190px);
    margin: 0;
    a {
      background-color: #fff;
      &:hover, &.current { background-color: var(--red); }
      + a { margin-top: var(--sp-s); }
    }
  }
}

.menu-overlay__close {
  position: absolute;
  top: var(--sp-m);
  right: var(--sp-m);
  width: 36px;
  height: 36px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #eee;            /* mirrors GLightbox .gclose tint */
  svg { width: 100%; height: 100%; display: block; }
  &:hover { color: var(--red); }
}

/* Homepage keeps the desktop-style overlay nav (big logo + floating
   nav box below) on mobile too — no top bar / menu button here. */
body.page-home .mobile-bar { display: none; }

@media (max-width: 47.99em) {
  .hero-caption {
    display: none;
  }
  a.edit-link {
    display: none;
  }
  body.page-home .sidebar--overlay {
    display: block;
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: auto;
    padding: calc(min(85vw, 290px) + var(--sp-m)) var(--sp-l) 0;
  }
  /* Logo sticks to the top and shrinks on scroll (JS drives --home-logo-size
     from hero size down to the 75px internal-page size; nav scrolls away). */
  body.page-home .sidebar--overlay .logo-link {
    position: fixed;
    top: var(--sp-xs);
    left: 50%;
    transform: translateX(-50%);
    width: var(--home-logo-size, min(85vw, 360px));
    margin: 0;
    z-index: 200;
  }
}

/* --- Nav shortcuts (sidebar buttons) ------------------------ */

.nav-shortcuts {
  width: 80%;
  margin: 0 auto var(--sp-l);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xs);
  font: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lsp);
  color: var(--faint);
}

.nav-shortcut {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3xs);
  border: 1px solid var(--surface-border);
  border-radius: 5px;
  padding: var(--sp-3xs) var(--sp-2xs);
  cursor: pointer;
  &:hover { border-color: var(--red); color: var(--red); }
}

/* Nav + keyboard shortcuts more visible */
.key-icon svg {
  color: var(--fg);
}
.key-label {
  color: var(--fg);
}

.nav-shortcut-row {
  display: flex;

  &:has(.shortcut-prev:not([hidden])):has(.shortcut-next:not([hidden])),
  &:has(.shortcut-scroll-top:not([hidden])):has(.shortcut-scroll-page:not([hidden])) {
    gap: var(--sp-2xs);
  }
  .nav-shortcut { flex: 1; }
  &:has(.shortcut-prev[hidden]) .shortcut-next { margin-left: auto; flex: 0 0 calc(50% - 2.5px); }
  &:has(.shortcut-next[hidden]) .shortcut-prev { flex: 0 0 calc(50% - 2.5px); }
  &:has(.shortcut-scroll-top[hidden]) .shortcut-scroll-page { margin-left: auto; flex: 0 0 calc(50% - 2.5px); }
  &:has(.shortcut-scroll-page[hidden]) .shortcut-scroll-top { flex: 0 0 calc(50% - 2.5px); }
}

.key-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 3px;
  svg { display: block; overflow: visible; }
}

.shortcut-page-count { cursor: pointer; justify-content: center; }

.image-list-jump-dialog {
  border: 1px solid var(--surface-border);
  border-radius: 8px;
  padding: var(--sp-m);
  font-family: var(--font-wayfinding);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--lsp);

  &::backdrop { background: rgba(0, 0, 0, 0.2); }
  label { display: block; margin-bottom: var(--sp-xs); color: var(--muted); }
  input {
    width: 60px;
    padding: var(--sp-3xs) var(--sp-2xs);
    border: 1px solid var(--surface-border);
    border-radius: 4px;
    font-size: var(--fs-sm);
  }
}

/* --- Hero (homepage) ---------------------------------------- */

.hero {
  width: 100%;
  height: 100vh;   /* fallback for pre-2022 browsers */
  height: 100svh;  /* static (small) viewport — won't resize as the mobile URL bar collapses */
  background: center / cover no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.hero-caption {
  background: var(--bg);
  padding: var(--sp-xs) var(--sp-m);
  margin: var(--sp-l);
  max-width: 300px;

  a {
    display: block;
    font-size: var(--fs-sm);
    text-decoration: none;
    color: var(--fg);
    &:hover { text-decoration: underline; }
  }
}

/* --- Dense image grid --------------------------------------- */

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 2px;
  padding: var(--gutter);
}

.grid-item {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--surface-border);
  text-decoration: none;

  img { width: 100%; height: 100%; object-fit: cover; display: block; }
  &:hover .grid-hover { opacity: 1; }
}

.grid-hover {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--sp-s);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.grid-title { font-size: var(--fs-label); font-weight: 700; line-height: 1; display: block; }
.grid-meta { font-size: var(--fs-eyebrow); opacity: 0.75; display: block; margin-top: 0.5em; }

/* --- Search overlay (always dark) --------------------------- */

.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  padding: 60px var(--sp-2xl) var(--sp-2xl);
  overflow-y: auto;

  &.is-open { display: block; }
}

.search-inner { max-width: 640px; margin: 0 auto; }

.search-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid #fff;
  color: #fff;
  font-size: 36px;
  font-family: var(--font-serif);
  padding: 0 0 var(--sp-s);
  outline: none;
  caret-color: var(--red);
  &::placeholder { color: #555; }
}

.search-results {
  margin-top: var(--sp-xl);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-m);
  padding: var(--sp-xs) var(--sp-s);
  text-decoration: none;
  color: var(--faint);
  border-radius: 3px;

  &.is-active, &:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    .search-result-title { color: #fff; }
    .search-result-meta { color: #888; }
    .search-badge { border-color: #888; color: var(--faint); }
  }
}

.search-result-title {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  color: inherit;
  flex: 1;
}

.search-result--section .search-result-title { font-style: italic; }

.search-result-meta,
.search-badge {
  font: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lsp);
  flex-shrink: 0;
}

.search-result-meta { color: #555; white-space: nowrap; }

.search-badge {
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid #444;
  color: #666;
}

/* --- Footer ------------------------------------------------- */

.site-footer {
  background: var(--surface);
  padding: var(--sp-xl);
  /* Auto-flowing columns: as many ~140px tracks as fit, left-aligned.
     Collapses to fewer columns (down to one) as the viewport narrows. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-m) var(--sp-2xl);
  border-top: 1px solid var(--rule);

  a {
    color: var(--fg);
    text-decoration: none;
    font-size: var(--fs-label);
    &:hover { text-decoration: underline; }
  }
}

/* Once there's room (~1100px), put every link back on one left-aligned row. */
@media (min-width: 1100px) {
  .site-footer {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }
}

/* --- GLightbox overrides + lightbox button ------------------ */

button.buy { display: none; }

button.lightbox-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3xs);
  font: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lsp);
  background: none;
  border: 1px solid var(--surface-border);
  border-radius: 5px;
  padding: var(--sp-3xs) var(--sp-2xs);
  cursor: pointer;
  color: var(--fg);
  &:hover { border-color: var(--red); color: var(--red); }
}

.glightbox-clean {
  .gslide-description { background: #fff; }
  .gdesc-inner {
    padding: var(--sp-s) var(--sp-m);
    font: var(--font-eyebrow);
    letter-spacing: var(--lsp);
    text-transform: uppercase;
    color: #000;
  }
  .gnext svg,
  .gprev svg,
  .gclose svg { display: none; }
  .gnext,
  .gprev,
  .gclose {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
  }
  .gclose { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6L6 18'/></svg>"); }
  .gprev { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>"); }
  .gnext { background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>"); }
}

/* --- Single post layout ------------------------------------- */

.single-main {
  margin-left: 0;
  padding-top: var(--topbar-h);
  min-height: 100vh;
  position: relative;

  article:not(.photo-single),
  .pagination { width: var(--content-w); margin-inline: auto; }

  article:not(article article) { padding-block: var(--gutter); margin-inline: auto; }

  article h1 {
    font-size: 1.5em;
    font-weight: 800;
    margin: 0;
    padding: 0;
    line-height: 1.1;
  }

  article .date {
    font-size: var(--fs-eyebrow);
    color: var(--muted);
    margin: 0;
    padding: var(--sp-xs) 0;
  }

  article .tags {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-m);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2xs);
    a { display: block; }
  }

  .info { color: var(--muted); font-size: 1.1rem; }
}

/* Tag chips — shared by single + photo-single meta */
.single-main article .tags a,
.photo-single .photo-single-meta .tags a {
  font-size: var(--fs-eyebrow);
  background: var(--surface);
  padding: 3px var(--sp-xs);
  border-radius: 3px;
  text-decoration: none;
  color: #555;
}

.section-label {
  display: block;
  font-size: var(--fs-label);
  color: var(--faint);
  text-decoration: none;
  margin-bottom: var(--sp-2xs);
  &:hover { color: #555; }
}

/* Page-title eyebrow — section landings (photos/drawings/comics/featured)
   and content pages (journal/about) share the .section-label look (faint
   wayfinding caps) instead of a large serif h1. Scoped to .featured-main
   (which wraps .content-main too) so it outranks `.content-main h1`. */
.featured-main .page-heading {
  display: block;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--faint);
  margin: 0 0 var(--sp-m);
}

/* On image-grid landings the heading sits flush above the grid */
.featured-main > .page-heading {
  margin: 0;
  padding: var(--gutter) var(--gutter) 0;
}
.featured-main > .page-heading + .content-grid { padding-top: var(--sp-s); }

/* Mobile: the section name lives in the fixed top bar (.mobile-bar__section),
   so the in-page section eyebrow + page heading are redundant — hide them.
   The albums-heading "View all" link is navigation (not a section name) and
   stays. Both reappear at the desktop breakpoint, where there's no top bar. */
@media (max-width: 47.99em) {
  .featured-main .page-heading { display: none; }
  .section-label { display: none; }
  .albums-heading .section-label { display: block; }
}

a.edit-link {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--sp-2xs) var(--sp-s);
  background: var(--surface-border);
  color: #fff;
  font-size: var(--fs-sm);
  text-decoration: none;
  z-index: 1;
  &:hover { background: var(--red); }
}

.pixelated-images img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Content images break out to full column width */
.single-main :is(.photo-image, .drawing-image, .image-list, .blowup, .featured-block) img {
  width: 100%;
  max-width: none;
  display: block;
}

/* Comics + featured single lists of images */
.image-list a:has(img) {
  display: block;
  + a:has(img) { margin-top: var(--sp-l); }
}

/* Responsive video embeds — CSS-only FitVids.
   Iframes carry hard-coded width/height; force them to fill + 16:9
   (Vimeo/YouTube; browsers don't read aspect-ratio off iframe attrs).
   <video> keeps its own ratio via height:auto. */
.single-main figure:has(> iframe),
.single-main figure:has(> video),
.single-main .video-container {
  width: 100%;
  margin: 1.5em 0;
  padding: 0;
}
.single-main figure iframe,
.single-main .video-container iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.single-main figure video { display: block; width: 100%; height: auto; }

.single-main .user-content {
  font-size: var(--fs-lg);
  line-height: 1.6;
  p { max-width: 75ch; }
}

.single-main .pagination { padding-block: var(--gutter); }
.single-main:has(.photo-single) .pagination,
.single-main:has(.photo-single) .journal-post-nav { padding: var(--sp-2xl) 0 0; }

/* --- Pagination (prev / next) ------------------------------- */

.pagination { display: flex; }

nav.pagination {
  display: flex;
  gap: var(--sp-2xs);
  width: 100%;

  span:empty { display: none; }

  a {
    display: block;
    flex: 1;
    padding: var(--sp-xs) var(--sp-s);
    background: var(--bg);
    color: var(--fg);
    text-decoration: none;
    font-size: var(--fs-label);
    font-weight: 600;
    line-height: 1.3;
    border: 1px solid var(--fg);
    &:hover { border-color: var(--red); color: var(--red); }
  }
  a.next { text-align: right; }
  a.prev:only-of-type { margin-right: auto; flex: 0 0 50%; }
  a.next:only-of-type { margin-left: auto; flex: 0 0 50%; }
}

@container (max-width: 230px) {
  nav.pagination { flex-direction: column; }
  nav.pagination a.prev:only-of-type,
  nav.pagination a.next:only-of-type { flex: 1; margin: 0; }
}

/* Journal single post nav (entry-nav partial).
   Two equal half-columns; each button is content-sized (justify-self keeps it
   from stretching to fill the lane) and hugs the centre gap, so the pair reads
   as a centred unit with equal padding. Because each owns a fixed half — and
   the missing side leaves a visibility:hidden placeholder holding its column —
   the visible button never shifts when its partner is absent. */
.journal-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xs);
  padding: var(--sp-l) 0 var(--sp-2xl);
  width: var(--content-w);
  margin-inline: auto;
}
.journal-post-nav > :first-child { justify-self: end; }
.journal-post-nav > :last-child { justify-self: start; }

.journal-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3xs);
  border: 1px solid var(--surface-border);
  border-radius: 5px;
  padding: var(--sp-3xs) var(--sp-2xs);
  text-decoration: none;
  color: var(--faint);
  font: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lsp);
  cursor: pointer;
  &:hover { border-color: var(--red); color: var(--red); }
}

.journal-nav-btn--empty { visibility: hidden; pointer-events: none; }

/* Content-area action buttons (single & listing prev/next, the Slideshow
   button) are ~2x the sidebar shortcut size — Fitts-friendly primary targets.
   The sidebar .nav-shortcut stays small on purpose: non-essential keyboard-hint
   labels / "pro" mouse nav. Shares the .nav-shortcut look, just scaled up. */
.journal-nav-btn,
button.lightbox-group {
  font-size: var(--fs-sm);
  gap: var(--sp-s);
  padding: var(--sp-xs) var(--sp-s);
  border-radius: 8px;
}
.journal-nav-btn .key-icon,
button.lightbox-group .key-icon {
  width: 16px;
  height: 16px;
  border-radius: 5px;
}
.journal-nav-btn .key-icon svg,
button.lightbox-group .key-icon svg {
  width: 16px;
  height: 16px;
}

/* Context-nav: injected by context-nav.js when a photo/drawing is reached from
   an album or tagged page. The back-link chip and the prev/next row are grouped
   in one parent so they read as a unit ("this nav is for <context>"). */
.context-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-xs);
  width: min(360px, var(--content-w));
  margin: var(--sp-2xl) auto;
  text-align: center;
}
/* nav sheds its standalone spacing inside the group and fills the group width;
   the centred 2-column grid (from .journal-post-nav) keeps the buttons natural
   width and stable, so no per-button flex sizing is needed here. */
.context-nav .journal-post-nav,
.single-main:has(.photo-single) .context-nav .journal-post-nav {
  width: 100%;
  margin: 0;
  padding: 0;
}
.context-nav-bar {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2xs);
  text-decoration: none;
  padding: var(--sp-s);
  &:hover .context-nav-label { color: var(--red); }
}
.context-nav-kind {
  font: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lsp);
  color: var(--faint);
}
.context-nav-label {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
}

/* When the nav's container is too narrow for two 2x buttons side by side
   (e.g. the photo/drawing single's meta column on large screens, where
   .photo-single-meta is a container), stack them instead of smooshing. The
   placeholder is dropped so a lone button doesn't leave an empty stacked row. */
@container (max-width: 320px) {
  .photo-single .journal-post-nav {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .photo-single .journal-post-nav > :first-child,
  .photo-single .journal-post-nav > :last-child { justify-self: center; }
  .photo-single .journal-post-nav .journal-nav-btn--empty { display: none; }
}

/* --- Full-bleed photo / drawing single ---------------------- */

.single-main article.photo-single {
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
}

.photo-single {
  .photo-single-image { padding: 0; }
  .photo-single-image img,
  .photo-single-meta .photo-single-image img { width: 100%; height: auto; display: block; }

  .photo-single-meta {
    padding: var(--gutter);
    container-type: inline-size;
  }
  .photo-single-meta-content { width: 100%; max-width: 960px; margin: 0 auto; }

  .photo-single-meta h1 {
    font-size: 1.5em;
    font-weight: 800;
    margin: 0;
    line-height: 1.05;
    letter-spacing: -0.01em;
  }
  .photo-single-meta .date {
    font-size: var(--fs-eyebrow);
    color: var(--muted);
    margin: var(--sp-xs) 0 0;
    padding: 0;
  }
  .photo-single-meta .tags {
    list-style: none;
    padding: 0;
    margin: var(--sp-s) 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2xs);
    a { display: block; }
  }
  .photo-single-meta .user-content { margin-top: var(--sp-s); }

  /* Tags (left) + EXIF (right) share one row with a rule beneath */
  .photo-meta-row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-xl);
    margin-top: var(--sp-l);
    padding-bottom: var(--sp-l);
    border-bottom: 1px solid var(--line);

    .tags { margin: 0; }
    .photo-exif { margin-left: auto; flex: 0 0 auto; }
  }
}

/* EXIF — two-column stacked grid: tiny label over serif value */
.photo-exif {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  column-gap: clamp(40px, 5vw, 72px);
  row-gap: var(--sp-s);
  margin: 0;

  div { display: flex; flex-direction: column; gap: var(--sp-3xs); }
  dt {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--lsp);
    color: var(--faint);
  }
  dd { margin: 0; font-size: var(--fs-sm); line-height: 1; color: var(--fg); white-space: nowrap; }
}

/* Albums this photo/drawing belongs to — cover thumb + title link + item count.
   On photos they stack under the tags in the meta row's left column (the row's own
   rule is the divider); on drawings (no meta row) it's a standalone block that
   carries its own top margin + dividing rule. */
.photo-single .photo-meta-left {
  display: flex;
  flex-direction: column;
  gap: var(--sp-l);
  min-width: 0;
}
.photo-single .photo-albums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-xl);
}
.photo-single .photo-single-meta-content > .photo-albums {
  margin-top: var(--sp-l);
  padding-bottom: var(--sp-l);
  border-bottom: 1px solid var(--line);
}
/* Album card — cover thumb + title + count. Used on single photo/drawing pages
   (inside .photo-albums) and on the section landing + album index grids
   (inside .album-card-list). */
.album-card {
  display: flex;
  align-items: center;
  gap: var(--sp-s);
  text-decoration: none;
}
/* Stacked-paper edges above the thumb — implies a stack of items: a full-width
   sheet peeking 2px up, then a narrower one 4px up (2px inset each side, centered) */
.album-card-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
}
.album-card-thumb::before,
.album-card-thumb::after {
  content: "";
  position: absolute;
  height: 1px;
  background: var(--line);
}
.album-card-thumb::before { top: -2px; left: 3px; right: 3px; }
.album-card-thumb::after { top: -4px; left: 6px; right: 6px; }
.album-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-border);
}
.album-card-text { display: flex; flex-direction: column; gap: var(--sp-3xs); }
.album-card-title { font-size: 0.8em; color: var(--fg); font-weight: 700; line-height: 1.1; }
.album-card:hover .album-card-title { text-decoration: underline; }
.album-card-count {
  font: var(--font-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--lsp);
  color: var(--muted);
}

/* Grid of album cards for the photos/drawings landing + album index pages */
.album-card-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-l) var(--sp-xl);
  padding: var(--gutter);
}

.photo-flickr-link {
  margin-top: 1.5em;
  font-size: var(--fs-label);
  a {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--lsp);
    color: var(--faint);
    text-decoration: none;
    &:hover { color: var(--red); }
  }
}

/* Narrow meta panel (≥1440px right rail, or mobile): stack EXIF under tags */
@container (max-width: 640px) {
  .photo-single .photo-meta-row {
    flex-direction: column;
    gap: var(--sp-l);
    border: none;
    .photo-exif {
      border-top: 1px solid var(--line);
      margin-left: 0;
      padding-top: var(--sp-l);
    }
  }
}

/* --- Content pages (journal index, about, tagged) ----------- */

.featured-main {
  margin-left: 0;
  padding-top: var(--topbar-h);
  min-height: 100vh;
}

.content-main {
  padding-block: var(--gutter);
  width: var(--content-w);
  margin-inline: auto;
  font-size: var(--fs-base);
  line-height: 1.6;

  h1 { font-size: var(--fs-h1); font-weight: 800; margin: 0 0 0.5em; line-height: 1.1; }
  img { max-width: 100%; height: auto; display: block; margin: 1.5em 0; }
}

.albums-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-m);
  padding-top: var(--sp-l);
  padding-bottom: 0;
  max-width: unset;

  h2 { font-size: var(--fs-h2); font-weight: 800; margin: 0; }
}

/* Journal / tagged lists (shared) */
.journal-list .journal,
.tagged-list .journal {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.5em;
  margin-bottom: 1.5em;

  h1 { font-size: 1.2em; margin: 0 0 var(--sp-3xs); }
  h1 a { text-decoration: none; color: var(--fg); }
  h1 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
  p { font-size: var(--fs-sm); color: #444; margin: 0; }
  p.date { font-size: var(--fs-eyebrow); }
}
.journal.is-single {
  p.date { font-size: var(--fs-sm); } }
}

.journal-list .date,
.tagged-list .journal .date {
  font-size: var(--fs-eyebrow);
  color: var(--muted);
  margin: 0 0 var(--sp-2xs);
}

.journal-list .journal-post-nav { padding-top: var(--sp-m); padding-bottom: 0; }

/* Journal index two-column layout: main list + right sidebar (blogroll).
   Stacks on mobile (column); desktop puts a ~300px sidebar to the right. */
.journal-layout { display: flex; flex-direction: column; gap: var(--sp-2xl); }
.journal-layout .journal-index { flex: 1 1 auto; min-width: 0; }

.journal-sidebar {
  font-size: var(--fs-sm);
  line-height: 1.6;

  h2, h3 {
    font-size: var(--fs-label);
    font-weight: 400;
    color: var(--faint);
    font-family: var(--font-wayfinding);
    text-transform: uppercase;
    letter-spacing: var(--lsp);
    margin: 0 0 var(--sp-s);
  }
  ul { list-style: none; margin: 0; padding: 0; }
  li + li { margin-top: var(--sp-2xs); }
  a { color: var(--fg); text-decoration: none; }
  a:hover { color: var(--red); }
}

@media (min-width: 64em) {
  /* Widen the centered column so the 300px sidebar sits beside the list
     without squeezing it. */
  .content-main:has(.journal-layout) { width: min(1280px, 100% - 2 * var(--gutter)); }
  .journal-layout { flex-direction: row; gap: var(--sp-2xl); align-items: flex-start; }
  .journal-sidebar { flex: 0 0 300px; position: sticky; top: var(--sp-2xl); }
}

.tagged-empty { color: var(--muted); }

.tagged-list { display: flex; flex-direction: column; margin-top: 1.5em; }

.tagged-item {
  display: flex;
  gap: var(--sp-l);
  align-items: flex-start;
  padding: 1.5em 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  &:hover h2 { text-decoration: underline; }
}

.tagged-item-image { flex: 0 0 160px; width: 160px; }
.tagged-item-image img { width: 100%; height: auto; display: block; margin: 0; }

.tagged-item-meta {
  flex: 1;
  min-width: 0;

  h2 { font-size: 1.2em; font-weight: 700; margin: 0 0 var(--sp-2xs); line-height: 1.2; }
  .date {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--lsp);
    color: var(--muted);
    margin: 0 0 var(--sp-xs);
  }
  .tags { display: flex; flex-wrap: wrap; gap: var(--sp-3xs); margin: 0; }
  .tag {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: var(--lsp);
    background: var(--surface);
    padding: 2px var(--sp-xs);
    border-radius: 3px;
    color: #555;
  }
}


/* --- Misc blocks -------------------------------------------- */

.social-links ul {
  list-style: none;
  li { display: inline-block; a { display: inline-block; padding: var(--sp-2xs); } }
}

.featured-block + .featured-block { margin-top: 4em; }

.image-list { margin-top: var(--sp-xl); }
.image-list__item + .image-list__item { margin-top: var(--sp-l); }

article.is-single .actions:not(:empty) { padding: var(--sp-l) 0 0; text-align: right; }

/* --- Desktop layer (≥48em): restore the fixed nav rail ------- */

@media (min-width: 48em) {
  body { --gutter: var(--sp-2xl); }

  .mobile-bar { display: none; }
  .menu-overlay { display: none !important; }

  .sidebar { display: flex; }

  .single-main,
  .featured-main { margin-left: var(--navWidth); padding-top: 0; }

  .site-footer { margin-left: var(--navWidth); }
  body.page-home .site-footer { margin-left: 0; }
}

/* Large desktop: photo single splits image-left / meta-right */
@media (min-width: 1440px) {
  .single-main article.photo-single {
    grid-template-columns: 70vw 1fr;
    min-height: 100vh;
    align-items: stretch;
  }
  .photo-single .photo-single-image { grid-column: 1; grid-row: 1; }
  .photo-single .photo-single-meta {
    grid-column: 2;
    grid-row: 1;
    min-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  }
  .photo-single .photo-single-meta .pagination,
  .photo-single .photo-single-meta .journal-post-nav {
    position: sticky;
    bottom: var(--sp-2xl);
    margin-top: auto;
  }
}

/* --- Slideshow modal (album & tagged grids) ----------------------
   Built by assets/js/slideshow.js; mirrors the single page — large image on
   one side, meta (title/date/caption/tags/albums/EXIF) + DETAIL + prev/next on
   the other. Stacks on small screens, splits image|panel on wide ones. */
/* Slideshow trigger button sits above the album/tagged grid */
.content-main .actions:not(:empty) { padding: var(--sp-m) 0 0; }

.slideshow-modal {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
.slideshow-modal::backdrop { background: rgba(0, 0, 0, 0.9); }
body.slideshow-open { overflow: hidden; }

.slideshow-stage {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.slideshow-image {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
}
.slideshow-image img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.slideshow-panel {
  flex: 0 0 auto;
  max-height: 42dvh;
  overflow-y: auto;
  padding: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--sp-m);
}
.slideshow-close {
  position: fixed;
  top: var(--sp-s);
  right: var(--sp-s);
  z-index: 3;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  &:hover { background: var(--red); }
}

/* The injected .photo-single-meta-content brings its own styling (h1, date,
   tags, EXIF, album cards) from the .photo-single scope — this wrapper just
   holds it above the footer. Dim slightly while the next page is fetching. */
.slideshow-meta { min-width: 0; }
.slideshow-modal.is-loading .slideshow-stage { opacity: 0.6; transition: opacity 0.1s; }

.slideshow-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-xs);
  margin-top: var(--sp-2xs);
}
.slideshow-footer .slideshow-detail { margin-inline: auto; }

@media (min-width: 900px) {
  .slideshow-stage { flex-direction: row; }
  .slideshow-image { flex: 1 1 62%; }
  .slideshow-panel {
    flex: 0 0 400px;
    max-height: none;
    height: 100%;
    border-left: 1px solid var(--line);
  }
  .slideshow-footer { margin-top: auto; }
}