/* Covers img.light-shadow (no caption) and figure.light-shadow img (with caption) */
.light-shadow,
.light-shadow img {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.14), 0 1px 6px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

/* Use  {width=60% .fluid-mobile}  to keep your chosen width on desktop but go
   full-width on phones. The !important is needed because the width=NN attribute
   renders as an inline style, which otherwise beats this rule. */
@media (max-width: 600px) {
  img.fluid-mobile,
  .fluid-mobile img {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================================================
   Postcard "pause" component  (paired with /js/postcards.js)
   Uses the site theme tokens (--green/--teal/--surface/--bg/--text/…)
   so it adapts to light & dark automatically.
   ===================================================================== */
.postcard {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: clamp(1.1rem, 3.5vw, 1.7rem);
  margin: 2.2rem 0 .2rem;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .10);
  overflow: hidden;
}
/* accent rail — signals "a different thing you can skip" */
.postcard::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: linear-gradient(var(--green), var(--teal));
}
/* before JS enhances it, show only the front (avoids a flash of stacked sections) */
.postcard:not(.pc-ready) .pc-back,
.postcard:not(.pc-ready) .pc-readable,
.postcard:not(.pc-ready) .pc-gallery { display: none; }

.pc-head { margin-bottom: .2rem; }
.pc-eyebrow {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .68rem;
  color: var(--teal);
  margin-bottom: .3rem;
}
.pc-title {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  color: var(--green);
  line-height: 1.14;
  margin: 0 0 .12rem;
}
.pc-sub {
  font-family: var(--display);
  color: var(--muted);
  font-size: .82rem;
  margin: 0 0 .2rem;
}

/* --- tabs --- */
.pc-tabs { margin-top: 1rem; }
.pc-tabs__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: .9rem;
}
.pc-tabs__bar [role="tab"] {
  appearance: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: .85rem;
  color: var(--muted);
  padding: .5rem .7rem;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.pc-tabs__bar [role="tab"]:hover { color: var(--text); }
.pc-tabs__bar [role="tab"][aria-selected="true"] { color: var(--green); border-color: var(--green); }
.pc-tabs__bar [role="tab"]:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.pc-panel[hidden] { display: none; }
.pc-anim { animation: pc-fade .25s ease; }
@keyframes pc-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- Front: fills the box width so every postcard shows at the SAME large size,
       regardless of the image's resolution (low-res ones just upscale a little).
       Add {width="60%"} in the .qmd on a specific image to override. --- */
.pc-media {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 5px 22px rgba(0, 0, 0, .16);
}

/* --- Back: one or more images, each fills the width by default (same as Front);
       size an individual one with {width="..."} and/or rotate with {.rot90}. --- */
.pc-back { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.pc-backitem { margin: 0; display: grid; place-items: center; width: 100%; }
.pc-backitem img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 6px; box-shadow: 0 5px 22px rgba(0, 0, 0, .16); }

/* --- Readable: theme-adaptive surface + text, so it's legible in both modes --- */
.pc-readable-body {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.05rem 1.2rem;
  font-family: var(--serif);
  font-size: 1.04rem;
  line-height: 1.7;
  color: var(--text);
}
.pc-readable-body > :first-child { margin-top: 0; }
.pc-readable-body > :last-child { margin-bottom: 0; }

/* --- Gallery: click-through thumbnails (no border line) --- */
.pc-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pc-gallery-grid button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.pc-gallery-grid button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.pc-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.pc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.pc-gallery-grid button:hover .pc-thumb img { transform: scale(1.05); }
@media (max-width: 520px) { .pc-gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* --- Standalone photo gallery (a `::: {.photo-gallery}` div, not in a postcard).
   JS (/js/postcards.js) upgrades this to a clickable grid that opens the shared
   lightbox. These rules style it BEFORE/without JS so it still reads as a clean
   thumbnail grid; once enhanced it carries `.pc-ready` and the inner
   `.pc-gallery-grid` takes over the layout. --- */
.photo-gallery { margin: 1.7rem 0; }
.photo-gallery:not(.pc-ready) { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.photo-gallery:not(.pc-ready) p { display: contents; margin: 0; }   /* let imgs join the grid */
.photo-gallery:not(.pc-ready) img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
@media (max-width: 520px) { .photo-gallery:not(.pc-ready) { grid-template-columns: repeat(2, 1fr); } }

/* --- caption sits BELOW the box; inherits the article's .figure-caption look --- */
.pc-caption { margin: .55rem 0 1.8rem; text-align: left; }

/* --- shared lightbox --- */
.pc-lb {
  position: fixed; inset: 0; z-index: 1000; display: none; place-items: center;
  background: rgba(15, 12, 6, .85); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: clamp(.8rem, 3vw, 2rem);
  cursor: pointer;   /* so tap-on-backdrop-to-close fires on iOS Safari */
}
/* but the image and controls themselves aren't "tap to close" targets */
.pc-lb__stage, .pc-lb__img { cursor: default; }
.pc-lb.open { display: grid; }
.pc-lb__stage { max-width: min(920px, 92vw); display: grid; gap: .7rem; justify-items: center; }
/* consistent large size in the lightbox too (upscale small images rather than
   showing them tiny); object-fit keeps aspect for the occasional portrait */
.pc-lb__img { width: min(920px, 92vw); height: auto; max-height: 88vh; object-fit: contain; border-radius: 4px; box-shadow: 0 20px 54px rgba(0, 0, 0, .5); }
.pc-lb__x {
  position: absolute; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .4); color: #fff; font-size: 1.2rem; cursor: pointer; line-height: 1;
}
.pc-lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(0, 0, 0, .45); color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.pc-lb__prev { left: clamp(.5rem, 2vw, 1.4rem); }
.pc-lb__next { right: clamp(.5rem, 2vw, 1.4rem); }
.pc-lb__x:hover, .pc-lb__nav:hover { background: rgba(0, 0, 0, .7); }
.pc-lb__x:focus-visible, .pc-lb__nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* optional caption under the enlarged image (empty/hidden when none given) */
.pc-lb__cap { max-width: min(920px, 92vw); color: #f3eee4; font-family: var(--display); font-size: .95rem; line-height: 1.45; text-align: center; }
.pc-lb__dots { display: flex; gap: .4rem; }
.pc-lb__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.pc-lb__dots i.on { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .pc-anim { animation: none; }
  .pc-media, .pc-thumb img { transition: none; }
}

/* =====================================================================
   Flat table of contents (built by /js/postcards.js)
   One flush list: section headings + each postcard (by its data-meta),
   in document order, with NO per-level indentation.
   ===================================================================== */
#TOC ul.pc-toc-flat { list-style: none; margin: 0; padding: 0; border-left: 0; }
#TOC ul.pc-toc-flat li { margin: 0; padding: 0; }
#TOC ul.pc-toc-flat a {
  display: block;
  padding: .2rem 0 .2rem .7rem;          /* left pad hosts the active bar, NOT a per-level indent */
  border-left: 2px solid transparent;
  color: var(--muted);
  font-family: var(--display);
  font-size: .82rem;
  line-height: 1.25;
  text-decoration: none;
  transition: color .12s, border-color .12s;
}
#TOC ul.pc-toc-flat a:hover { color: var(--text); }
#TOC ul.pc-toc-flat a.active { color: var(--green); border-left-color: var(--green); }
/* light scan aid WITHOUT indenting: top-level (h1) sections a touch bolder */
#TOC ul.pc-toc-flat a.pc-toc-h1 { font-weight: 600; color: var(--text); }
/* postcards stand out (the "Postcard N ..." lines) */
#TOC ul.pc-toc-flat a.pc-toc-postcard { color: var(--teal); }
#TOC ul.pc-toc-flat a.pc-toc-postcard.active { color: var(--teal); border-left-color: var(--teal); }
#TOC ul.pc-toc-flat a.pc-toc-postcard::before { content: "\2709\00a0"; opacity: .6; font-size: .9em; }

/* so clicking a postcard in the TOC doesn't tuck it under the fixed navbar */
.postcard { scroll-margin-top: 5rem; }