/* ====================================================================
   Two additions, October 2026.

   1. PHOTO VIEWER -- hovering a photograph shows the whole picture at its
      true shape. Most photographs on the site are fitted into a cell: the
      home page band crops to 4/5, article leads crop to 16/9, card and post
      thumbnails crop too. Cropping keeps the rows tidy but hides part of
      the picture, so the viewer is the way to see all of it.

      Hover opens it; moving away closes it. A click PINS it open so it can
      be looked at properly, and a pinned viewer is closed with Escape, the
      close button, or a click outside. Touch screens have no hover, so a
      tap opens it pinned -- same thing, one step.

      While unpinned the overlay must NOT take the mouse, or it would cover
      the photograph the pointer is on and instantly close itself. Hence
      pointer-events: none until pinned.

   2. SHARE BAR -- the links are real <a> elements written into the page by
      the generator, so they work with no JavaScript and crawlers can see
      them. share.js only adds the two that cannot be plain links: the
      phone's own share sheet and copy-to-clipboard.
   ==================================================================== */

/* -------------------------------------------------- 1. photo viewer */
.pv-wrap {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; padding: 4vh 4vw;
  background: rgba(10, 10, 12, .9);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}
.pv-wrap.on      { opacity: 1; visibility: visible; }
.pv-wrap.pinned  { pointer-events: auto; background: rgba(10, 10, 12, .94); }

/* max-height leaves room for the caption; the image keeps its own ratio
   because neither dimension is forced. */
.pv-img {
  display: block; max-width: 92vw; max-height: 78vh;
  width: auto; height: auto;
  border-radius: 6px; background: #1b1b1f;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
}
.pv-cap {
  margin: 0; max-width: min(760px, 90vw); text-align: center;
  font-family: var(--ui, system-ui), sans-serif; font-size: 0.7768rem;
  line-height: 1.45; color: #e8e8ea;
}
.pv-cap .pv-dim {
  display: block; margin-top: 4px;
  font-size: 0.6865rem; letter-spacing: .04em; text-transform: uppercase;
  color: #9a9aa2;
}
.pv-close {
  position: absolute; top: 18px; right: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .28); background: rgba(0, 0, 0, .4);
  color: #fff; font-size: 1.1743rem; line-height: 1; cursor: pointer;
}
.pv-wrap.pinned .pv-close { display: flex; }
.pv-close:hover { background: rgba(255, 255, 255, .16); }
.pv-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--ui, system-ui), sans-serif; font-size: 0.6684rem;
  letter-spacing: .05em; text-transform: uppercase; color: #8e8e96;
}
.pv-wrap.pinned .pv-hint { display: none; }

/* A photograph that can be opened. Cursor is the only hint on a mouse;
   the outline on focus is what makes it reachable by keyboard. */
.pv-able { cursor: zoom-in; }
.pv-able:focus-visible { outline: 3px solid var(--red, #d10000); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .pv-wrap { transition: none; }
}

/* -------------------------------------------------------- 2. share */
.sharebar {
  margin: 34px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line, #e3e3e5);
}
.sharebar-h {
  margin: 0 0 10px; font-family: var(--ui, system-ui), sans-serif;
  font-size: 0.6684rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2, #5c6068);
}
.sharebar-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.sharebar-list a,
.sharebar-list button {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0; padding: 8px 13px;
  font-family: var(--ui, system-ui), sans-serif;
  font-size: 0.7406rem; font-weight: 600; line-height: 1;
  color: var(--ink, #17161a); text-decoration: none;
  background: var(--paper, #fff);
  border: 1px solid var(--line, #e3e3e5); border-radius: 999px;
  cursor: pointer; transition: border-color .15s, color .15s, background .15s;
}
.sharebar-list a:hover,
.sharebar-list button:hover {
  color: var(--red, #d10000); border-color: var(--red, #d10000);
  background: var(--red-soft, #fdf0ee);
}
.sharebar-list a:focus-visible,
.sharebar-list button:focus-visible {
  outline: 3px solid var(--red, #d10000); outline-offset: 2px;
}
.sharebar-list svg { width: 15px; height: 15px; flex: none; }

/* "Copied" confirmation, swapped in by share.js */
.sharebar-list button.done {
  color: #0a7a3d; border-color: #0a7a3d; background: #eef9f2;
}

/* Hidden until share.js decides the browser supports it. */
.sharebar [hidden] { display: none !important; }

@media (max-width: 560px) {
  .sharebar-list a span,
  .sharebar-list button span { position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sharebar-list a,
  .sharebar-list button { padding: 10px; }
  .sharebar-list svg { width: 17px; height: 17px; }
}


/* The share bar sat in one half of the two-column body, leaving the other
   half -- 538px -- empty. It closes the page, so it spans it. */
.body > .sharebar,
.sharebar { grid-column: 1 / -1; }