/* pass-along.css — the row that lets a reader send a page to someone.
   Named "pass-along", not "share": every obvious name for this
   (.share-block, .share-head, .share-line) is on the public ad-blocker
   filter lists, which hide the element outright. Verified 2026-08-18
   against EasyList, EasyPrivacy and Fanboy's Social. Do not rename these
   classes to anything containing "share" or "social", and do not put a
   pinterest.com/pin/create or facebook.com/sharer address in an href:
   those are hidden by URL prefix too, which is why the buttons build
   their destination when clicked. */

.pass-along {
  margin-top: clamp(2.8rem, 8vh, 4.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid #e3e3dd;
}
.pass-along .pass-head {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #555550;
}
.pass-row {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7em;
}
.pass-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Every chip the same width, so the row reads as one set and, more to the
     point, so "Copy link" turning into "Copied" never shifts its neighbours.
     8rem holds the longest label (Pinterest) and still fits four across the
     38rem article column; narrower screens wrap them two by two, still equal. */
  min-width: 8rem;
  white-space: nowrap;
  gap: 0.55em;
  background: #fff;
  border: 1px solid #dcdcd6;
  border-radius: 999px;
  padding: 0.62em 1.15em;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #141414;
  cursor: pointer;
  line-height: 1;
  transition: border-color 250ms ease, box-shadow 250ms ease, transform 150ms ease;
}
.pass-item:hover, .pass-item:focus-visible {
  border-color: #b9b9b0;
  box-shadow: 0 1px 6px rgba(20, 20, 20, 0.10);
  transform: translateY(-1px);
}
.pass-item svg { flex: 0 0 auto; }
.pass-item[hidden] { display: none; }

/* Homepage: each share button is its own hand-placed line.
   Everything is sized in em so the editor's "size px" slider grows the icon,
   and position comes from the editor, one button at a time. */
.pass-btn { line-height: 0; }
.pass-btn button {
  display: block;
  background: none;
  border: 0;
  padding: 0;
  /* Without this a button keeps the browser's own type size, and the icon
     (sized in em) would ignore the editor's size slider. */
  font: inherit;
  color: #141414;
  cursor: pointer;
  line-height: 0;
  opacity: 0.85;
  transition: opacity 200ms ease, transform 150ms ease;
}
.pass-btn button:hover { opacity: 1; transform: translateY(-1px); }
.pass-btn svg { display: block; width: 1em; height: 1em; }
/* While dragging in edit mode the buttons are scenery, not controls. */
body.editing .pass-btn button { cursor: inherit; }

/* The copy confirmation, centred in the window */
.pass-note {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  z-index: 60;
  background: #141414;
  color: #fbfbf9;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 1em 1.6em;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease, transform 300ms ease;
}
.pass-note.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .pass-note { transition: opacity 300ms ease; }
  .pass-note.on { transform: translate(-50%, -50%); }
}