/* Social rail for every page but the homepage (which carries its own copy).
   Two small buttons ride along the left edge on desktop; on phones they move
   into the bar, where they can't cover any text. Load it after the page's own
   styles so the wider desktop gutter wins. */
.social { position: fixed; z-index: 60; left: clamp(.75rem, 1.6vw, 1.5rem); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .5rem; padding: .5rem; border-radius: 3px;
  --s-bg: #282120; --s-ink: #FFF6EA; --s-line: rgba(255,246,234,.18);
  background: color-mix(in oklab, var(--s-bg) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--s-line); }
.social--paper { --s-bg: #FFF6EA; --s-ink: #241C1A; --s-line: rgba(36,28,26,.16); }
.social__btn, .bar__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 2px; transition: background-color .15s ease-out, color .15s ease-out; }
.social__btn { color: var(--s-ink); }
.bar__icon { color: inherit; }
.social__btn svg, .bar__icon svg { width: 1.2rem; height: 1.2rem; }
@media (hover: hover) and (pointer: fine) {
  .social__btn:hover { background: #E0A44A; color: #282120; }
}
.bar__social { display: none; }

/* On desktop the side gutter is wide enough to hold the rail. */
@media (min-width: 861px) { :root { --sc-gutter: clamp(5.75rem, 6.5vw, 6.5rem); --gutter: clamp(5.75rem, 6.5vw, 6.5rem); } }

@media (max-width: 860px) {
  .social { display: none; }
  .bar__social { display: flex; gap: 2px; margin-left: auto; }
  .bar__social + .bar__book { margin-left: 0; }
}
body[data-ground="paper"] .social { --s-bg: #FFF6EA; --s-ink: #241C1A; --s-line: rgba(36,28,26,.16); }

/* With the icons in the bar, the button says just "Book" on narrow phones. */
.bar__short { display: none; }
@media (max-width: 440px) {
  .bar__long { display: none; }
  .bar__short { display: inline; }
}