/* Fontaine-style metric override: approximate Newsreader metrics on top of
   Georgia so the fallback layout is close enough to eliminate visible CLS
   when the real Newsreader swaps in. Values are rough but better than raw
   Georgia. Regenerate via fontaine if precision matters. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia');
  size-adjust: 102%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* Smooth font rendering on macOS / Windows */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Links in prose get subtle underlines instead of the Tailwind default */
article a[target='_blank']:not(.no-underline) {
  text-underline-offset: 3px;
}

/* Google SERP embed — soften Google's hard white with a gentle warm tint
   so the iframe feels seated in the cream palette instead of sitting on top
   of it. Filter applies cross-origin (pixel-level), sepia 0.08 is enough to
   shift pure-white toward #FDF8F0-ish without touching link blue noticeably. */
.google-embed-iframe {
  display: block;
  border: 0;
  border-radius: 6px;
  background: #FDF8F0;
  filter: sepia(0.08) saturate(0.94) brightness(0.995);
}

/* RDAP block status colors */
.rdap-available { color: #16A34A; }
.rdap-taken     { color: #DC2626; }
.rdap-unknown   { color: #9CA3AF; }

/* ─── Horizontal card strips (Why Now, How to use) ────────────────────
   Free scroll (no snap — scanning cards is a browse, not a carousel).
   Edge fade mask hints at more content off-frame. Thin indigo scrollbar. */
.card-strip-wrap {
  position: relative;
}

.card-strip {
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-padding-inline: 24px;
  /* edge fade — right side only so the first card's left border stays crisp;
     left fade hid it at scroll=0. Right fade still hints at off-frame cards. */
  -webkit-mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - 24px),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    black 0,
    black calc(100% - 24px),
    transparent 100%
  );
}
.card-strip::-webkit-scrollbar { height: 6px; }
.card-strip::-webkit-scrollbar-track { background: transparent; }
.card-strip::-webkit-scrollbar-thumb {
  background: rgba(67, 56, 202, 0.2);
  border-radius: 3px;
}
.card-strip::-webkit-scrollbar-thumb:hover {
  background: rgba(67, 56, 202, 0.4);
}

/* Desktop scroll arrows — hidden on mobile, fade in on hover */
.card-strip-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: #FDF8F0;  /* card — warm cream, not pure white */
  border: 1px solid rgba(24, 24, 27, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s, background-color 0.15s, border-color 0.15s;
  color: #52525B;
  cursor: pointer;
}
.card-strip-arrow:hover {
  background: #F8F4EC;
  border-color: #4338CA;
  color: #4338CA;
  opacity: 1;
}
.card-strip-arrow-prev { left: -4px; }
.card-strip-arrow-next { right: -4px; }
.card-strip-arrow[disabled] {
  opacity: 0.35 !important;
  cursor: default;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .card-strip-arrow { display: flex; }
  .card-strip-wrap:hover .card-strip-arrow { opacity: 1; }
  .card-strip-wrap:hover .card-strip-arrow[disabled] { opacity: 0.35 !important; }
}