:root {
  --paper: #faf7f0;
  --panel: #ffffff;
  --line: #e4dfd2;
  --ink: #20261f;
  /* Darker than before -- closer to --ink -- for readability; this drives
     most body copy (intro/about text) and the nav menu at rest. */
  --mut: #4c5046;
  --shadow: rgba(32, 38, 31, 0.12);
  /* Single shared accent for the brand tag ("Photography") and the active
     nav-menu underline -- dark theme keeps the original yellow-gold below,
     but that reads too faint against the light --paper, so light theme
     gets its own dark red instead. */
  --default-accent: #8a3324;
  /* Text/scrim colors drawn ON TOP of photos (gallery hover captions, the
     lightbox). Deliberately not redefined in the dark-theme block below --
     they always sit on their own dark scrim for legibility regardless of
     the page's light/dark theme, so they stay constant either way. */
  --overlay-text: #f4f1e8;
  --overlay-text-mut: #a6ab9e;
  --overlay-scrim: rgba(0, 0, 0, 0.75);
  /* Per-category accents, also overlaid on photos -- same reasoning, kept
     as a single fixed color (the former dark-theme value of each) rather
     than switching with theme. Wired to a category by folder slug below. */
  --accent-micro: #7fb0c9;
  --accent-bird: #d9b67f;
  --accent-landscape: #74c7b0;
  /* Fixed (former dark-theme value of --default-accent) for the same
     overlaid-on-photos reason -- used by the hover metadata text. */
  --overlay-accent: #c9b28a;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Atkinson Hyperlegible", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gap: 14px;
}

html[data-theme="dark"] {
  --paper: #14181d;
  --panel: #1b2129;
  --line: #2a323c;
  --ink: #ece8dc;
  /* Lighter than before -- closer to --ink -- for readability, same reason
     as light theme's darker --mut above. */
  --mut: #b4bbb6;
  --shadow: rgba(0, 0, 0, 0.45);
  --default-accent: #c9b28a;
}

/* Always reserve the vertical scrollbar's width, whether or not the current
   page is tall enough to need one -- otherwise centered content (header,
   .gal, etc.) sits at a very slightly different horizontal position on a
   short page vs. a tall one, which reads as everything "jumping" a few
   pixels when navigating between galleries of different lengths. */
html {
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.65;
  transition: background 0.3s, color 0.3s;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
}

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

/* Per-category accent, keyed by folder slug (data-slug, set on .door and
   .gal). A category without a matching rule here just keeps the neutral
   default -- add one more rule below to give a new category its own color. */
.door,
.gal {
  --hl: var(--default-accent);
}

.door[data-slug="bird-photography"],
.gal[data-slug="bird-photography"] {
  --hl: var(--accent-bird);
}

.door[data-slug="microphotography"],
.gal[data-slug="microphotography"] {
  --hl: var(--accent-micro);
}

.door[data-slug="landscapes"],
.gal[data-slug="landscapes"] {
  --hl: var(--accent-landscape);
}

/* ---------- Header / nav ---------- */

header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--line);
}

.wrap {
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 26px;
}

header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 13px;
  padding-bottom: 13px;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  text-decoration: none;
}

.brand-tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--default-accent);
}

.brand-tag::before {
  content: "·";
  margin-right: 8px;
  color: var(--mut);
}

nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.menu {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.menu a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mut);
  text-decoration: none;
  /* Symmetric padding (not bottom-only) so this box's text lines up with
     #theme-toggle's after nav's align-items:center centers both boxes. */
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.menu a:hover,
.menu a[aria-current="true"] {
  color: var(--ink);
  border-color: var(--default-accent);
}

#theme-toggle {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  /* Fixed width (sized to the longer of "light"/"dark") so the pill doesn't
     resize -- and shove the rest of the nav sideways -- when its label
     changes on toggle. */
  width: calc(5ch + 24px);
  padding: 6px 12px;
  text-align: center;
  background: none;
  cursor: pointer;
}

/* ---------- Page content ---------- */

.content {
  flex: 1 0 auto;
  animation: fadeIn 0.5s ease both;
}

/* Index page only -- nudges the doors down from flush-under-the-header
   towards vertical center, without fully centering (padding-top rather than
   flex justify-content: center, so it's a partial shift, not dead center). */
.content-home {
  padding-top: 6vh;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.page-heading {
  font-size: clamp(28px, 4vw, 40px);
}

.page-description {
  color: var(--mut);
  max-width: 62ch;
  margin-bottom: 2.5rem;
}

/* ---------- About blurb (two columns, below the doors) ---------- */

.intro-cols {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 26px 44px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.intro-cols p {
  font-size: 15.5px;
  color: var(--mut);
  text-align: justify;
  hyphens: auto;
}

/* ---------- Doors (homepage category links) ---------- */

.hero-full {
  position: relative;
  display: flex;
  gap: var(--gap);
  max-width: 1180px;
  margin: 40px auto 0;
  padding: 0 26px 24px;
  height: min(48vh, 430px);
  min-height: 280px;
}

.door {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 8px;
  text-decoration: none;
  background-size: cover;
  background-position: center;
  transition: flex 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.door:hover {
  flex: 1.3;
}

.door::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 12, 10, 0.72) 0%, rgba(10, 12, 10, 0) 46%);
}

.door .tag {
  position: absolute;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: var(--overlay-text);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.door:hover .tag,
.door:focus-visible .tag {
  opacity: 1;
}

.door .tag b {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.12;
  color: var(--overlay-text);
}

.door .tag small {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  color: var(--overlay-text);
}

/* ---------- From the blog (homepage strip) ---------- */

.bstrip {
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 26px 70px;
  border-top: 1px solid var(--line);
}

.bstrip .bs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.bstrip h2 {
  font-size: 26px;
}

.more {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
  text-decoration: none;
}
.more:hover {
  color: var(--ink);
}

.bs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

/* ---------- Cards shared by blog strip + blog index + posts ---------- */

.post {
  display: block;
  text-decoration: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px 22px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s, border-color 0.3s;
}

.post:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px var(--shadow);
}

.pd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post .pd {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mut);
}

/* Tag pills: Birds/Microscopy/Landscape reuse the same fixed accent colors
   as their galleries (see the .door/.gal accent rules); anything else falls
   back to the neutral default accent. */
.tag-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pill-accent, var(--default-accent));
  border: 1px solid var(--pill-accent, var(--default-accent));
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.6;
}

.tag-pill[data-tag="birds"] {
  --pill-accent: var(--accent-bird);
}
.tag-pill[data-tag="microscopy"] {
  --pill-accent: var(--accent-micro);
}
.tag-pill[data-tag="landscape"] {
  --pill-accent: var(--accent-landscape);
}

.post h3 {
  font-size: 19px;
  margin: 8px 0 6px;
}

.post p {
  font-size: 14.5px;
  color: var(--mut);
}

/* ---------- Gallery pages ---------- */

.justified-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}

.gallery-item {
  position: relative;
  display: block;
  text-decoration: none;
  /* Sized in JS once row-packing runs; these are just sane pre-layout defaults. */
  width: 300px;
  height: 260px;
}

.ph {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* The photo + its caption shrink inward together on hover, vacating a
   margin band for .hover-box (a sibling, sized to .ph) to frame around. */
.photo-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: inset 0.2s ease;
}

.gallery-item:hover .photo-inner,
.gallery-item:focus-visible .photo-inner {
  inset: 8px;
}

.photo-inner picture {
  position: absolute;
  inset: 0;
}

.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hover rectangle: sits at the photo's own edge, in the margin the photo
   just vacated above -- framing it rather than overlapping it. Sized to
   match exactly, so it can't touch a neighboring photo's rectangle either. */
.hover-box {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 2;
}

.gallery-item:hover .hover-box,
.gallery-item:focus-visible .hover-box {
  opacity: 1;
}

.corner {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.corner.tl {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--mut);
  border-left: 1px solid var(--mut);
}
.corner.tr {
  top: -1px;
  right: -1px;
  border-top: 1px solid var(--mut);
  border-right: 1px solid var(--mut);
}
.corner.bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 1px solid var(--mut);
  border-left: 1px solid var(--mut);
}
.corner.br {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--mut);
  border-right: 1px solid var(--mut);
}

.gallery-item-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px;
  background: linear-gradient(to top, var(--overlay-scrim), transparent);
  color: var(--overlay-text);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gallery-item:hover .gallery-item-caption,
.gallery-item:focus-visible .gallery-item-caption {
  opacity: 1;
  transform: translateY(0);
}

.cap-title {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
}

.cap-meta {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--overlay-accent);
  margin-top: 2px;
}

/* ---------- Blog index ---------- */

.post-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 70ch;
}

/* ---------- Individual post ---------- */

.post-body {
  max-width: 70ch;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.post-body h2,
.post-body h3 {
  margin: 1.75rem 0 0.75rem;
}

.post-body p {
  margin-bottom: 1.1rem;
}

.post-body img {
  margin: 1.5rem 0;
  border-radius: 6px;
}

.post-body a {
  color: var(--ink);
  text-decoration-color: var(--line);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
  margin: 0.25rem 0 1.5rem;
}

/* ---------- About ---------- */

/* Text column (2fr) left, image column (1fr) on the right -- works out to
   the photos being roughly 1/3 of the available width, the text 2/3.
   .about-photos comes first in the markup but is reordered to the right
   visually via `order`, rather than reordering the HTML. */
.about-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Pushed down to align with the body text rather than the heading above it
   -- .about-heading renders at roughly 24px * 1.65 line-height + its 0.9rem
   margin-bottom ≈ 54px, so the photos start level with the first
   paragraph instead of the "About me"/"Equipment" label. Best estimate;
   nudge if it's off once rendered. */
.about-photos {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  order: 2;
  margin-top: 54px;
}

/* Capped narrower than its grid column on purpose (not width: 100%) --
   both photos are landscape-oriented (not tall portraits), so stacked at
   full column width they render shorter than the text block next to them.
   This width is a best estimate to make the two blocks' total height come
   out roughly even (a "nice rectangle" as a whole); nudge it up/down if it
   doesn't land right once you see it rendered -- smaller value = shorter
   combined photo block, independent of the text column's own width. */
.about-photo {
  width: 100%;
  max-width: 310px;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* Same treatment as .intro-cols p on the homepage: smaller and muted
   instead of full-strength ink, so it reads as quieter supporting text.
   Single column now (was column-count: 2) -- at a fixed total column width,
   going from 2 columns to 1 roughly preserves total text height (each line
   just holds about twice as many characters, needing about half as many
   lines), so the .about-photo max-width tuned to match the old two-column
   height should still land close to even with this. */
.about-body {
  order: 1;
  line-height: 1.7;
  text-align: justify;
  hyphens: auto;
}

.about-body p {
  font-size: 15.5px;
  color: var(--mut);
  margin-bottom: 1.1rem;
}

.about-body code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.about-body h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 1.4rem 0 0.6rem;
}

.about-body h3:first-child {
  margin-top: 0;
}

.about-body ul {
  list-style: none;
  padding: 0;
  margin-bottom: 1.1rem;
}

.about-body li {
  position: relative;
  padding-left: 1.1em;
  font-size: 15.5px;
  color: var(--mut);
  line-height: 1.5;
}

.about-body li + li {
  margin-top: 0.3rem;
}

.about-body li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--default-accent);
}

.about-heading {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  margin-bottom: 0.9rem;
  color: var(--ink);
}

.about-section + .about-section {
  margin-top: 3.5rem;
  padding-top: 3.5rem;
  border-top: 1px solid var(--line);
}

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

footer {
  border-top: 1px solid var(--line);
  padding: 20px 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mut);
}

.social-media {
  display: flex;
  gap: 1rem;
}

.social-media a {
  display: inline-flex;
  align-items: center;
  color: var(--mut);
  transition: color 0.2s ease;
}

.social-media a svg {
  display: block;
}

.social-media a:hover {
  color: var(--ink);
}

/* ---------- Wrappers shared by non-home pages ---------- */

.gal,
.blog,
.about-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 26px 80px;
}

.blog {
  max-width: 860px;
}

/* ---------- Responsive ---------- */

/* Wider than the other 900px breakpoint below -- a phone's landscape width
   can reach ~930px on the largest current models, so this needs to be high
   enough to still catch "phone sideways" (not just portrait), stacking the
   photos into one column in both orientations instead of the two-column
   grid taking over on the biggest phones. */
@media (max-width: 960px) {
  .about-layout {
    grid-template-columns: 1fr;
  }

  .about-photos {
    max-width: 310px;
    margin: 0 auto;
  }
}

@media (max-width: 900px) {
  .intro-cols {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

@media (max-width: 720px) {
  header {
    padding: 10px 16px;
  }

  .gal,
  .blog,
  .about-wrap,
  .bstrip,
  .intro-cols {
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero-full {
    flex-direction: column;
    height: auto;
    min-height: 0;
    padding: 0 16px 20px;
    gap: 10px;
  }

  .door {
    height: 30vh;
    min-height: 210px;
  }

  .door:hover {
    flex: 1;
  }

  /* No meaningful hover on touch -- tapping a door navigates away before a
     :hover state would ever be seen, so the title would otherwise never be
     visible. Keep it always shown here instead. */
  .door .tag {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Lightbox ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  flex-direction: column;
  background: rgba(10, 12, 10, 0.95);
  padding: 18px;
}

.lb.on {
  display: flex;
}

.lb-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--overlay-text-mut);
}

/* Both are plain <button>s -- strip the native button chrome (background,
   border) that was making them look like gray boxes, and add a soft round
   hover/focus halo instead so they read as part of the dark lightbox rather
   than a separate UI control sitting on top of it. */
.lb-x,
.lb-nav {
  appearance: none;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
}

.lb-x:hover,
.lb-x:focus-visible,
.lb-nav:hover,
.lb-nav:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
}

.lb-x {
  font-size: 26px;
  line-height: 1;
  color: var(--overlay-text);
  padding: 6px 10px;
}

.lb-mid {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 0 0;
}

.lb-mid img {
  max-width: calc(100% - 120px);
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  color: var(--overlay-text-mut);
  padding: 14px;
  transition: color 0.2s, background-color 0.2s;
}

.lb-prev {
  left: 0;
}
.lb-next {
  right: 0;
}

.lb-nav:hover,
.lb-nav:focus-visible {
  color: var(--overlay-text);
}

/* Category accent (--hl) is set inline per-photo by lightbox.js, read from
   the clicked gallery item -- every rule below just consumes var(--hl). */
/* Fixed height (rather than sized to content) so .lb-mid -- and the image
   and nav arrows inside it -- stay put regardless of how much caption text
   a given photo has. Longer-than-usual captions scroll instead of pushing
   the image around. */
.lb-cap {
  flex: none;
  height: 210px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 16px 6px;
}

.lb-title {
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--overlay-text);
}

.lb-title-sep {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  margin: 0 8px;
  color: var(--hl, var(--overlay-accent));
}

.lb-title-sec {
  font-weight: 400;
  font-size: 17px;
  color: var(--overlay-text-mut);
}

.lb-title-la {
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--overlay-text-mut);
}

.lb-blurb {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--overlay-text-mut);
  max-width: 52ch;
  margin: 10px auto 0;
}

.lb-loc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--overlay-text-mut);
}

.lb-loc svg {
  width: 11px;
  height: 11px;
  flex: none;
  opacity: 0.7;
}

.lb-specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}

.lb-pill {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--hl, var(--overlay-accent));
  border: 1px solid var(--hl, var(--overlay-accent));
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .lb-mid img {
    max-width: 100%;
  }

  .lb-nav {
    padding: 10px 4px;
  }
}

/* A phone held sideways has a short viewport height (unlike a tablet in
   landscape, which stays plenty tall) -- that combination reliably singles
   out "phone, landscape" without touching real tablets. Worth targeting
   specially because touch browsers often trigger :hover on tap, so this
   caption overlay tends to end up on screen right when the grid already has
   less height to work with (more, smaller columns instead of portrait's
   single full-width one) -- shrink it so the photo underneath stays the
   main thing on screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .gallery-item-caption {
    padding: 5px 8px;
  }

  .cap-title {
    font-size: 0.7rem;
  }

  .cap-meta {
    font-size: 0.6rem;
  }

  /* A landscape phone has width to spare but almost no height, so stacking
     the caption below the image (the normal layout) leaves barely anything
     for the photo itself. Switch .lb to a grid so the caption becomes a
     narrow right-hand sidebar instead -- full height, no competition with
     the image for the scarce vertical space -- while .lb-top still spans
     across the top as a full-width bar. Grid areas let this reflow happen
     without needing separate markup for the two layouts. */
  .lb.on {
    display: grid;
    grid-template-columns: 1fr 200px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "top top"
      "mid cap";
    gap: 0 12px;
  }

  .lb-top {
    grid-area: top;
  }

  .lb-mid {
    grid-area: mid;
    padding-top: 6px;
  }

  /* .lb-cap's height is normally a fixed 210px (see above, to stop it
     resizing .lb-mid/the image between photos with different amounts of
     caption text) -- here it's a sidebar instead, so it takes the grid
     row's full height rather than a fixed one. All of the caption's fields
     stay -- title, blurb, location, pills -- it just scrolls internally
     (overflow-y: auto, inherited from the base .lb-cap rule) if there isn't
     room for all of it in one screen's height. Left-aligned rather than
     centered, since a narrow sidebar reads better that way, and bottom-
     justified so it starts flush with the bottom edge of the photo next to
     it rather than the top of the sidebar.  */
  .lb-cap {
    grid-area: cap;
    height: auto;
    max-width: none;
    margin: 0;
    padding: 6px 4px;
    text-align: left;
    justify-content: flex-end;
  }

  .lb-title {
    font-size: 15px;
  }

  .lb-blurb {
    max-width: none;
  }

  .lb-loc {
    justify-content: flex-start;
    margin-top: 6px;
  }

  .lb-specs {
    justify-content: flex-start;
    margin-top: 6px;
  }
}