/* Stories Worth Visiting — shared editorial styles */

html { scroll-behavior: smooth; }

body {
  background-color: #F4F0E7;
  color: #1E211F;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

::selection { background: #D8C8A9; color: #1E211F; }

.hairline { border-color: rgba(30,33,31,0.14); }

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.045;
  pointer-events: none;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reveal on scroll — fade + 10px, per the "less movement, better timing" direction */
.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition: none; opacity: 1; transform: none; }
}

/* Editorial images: sharp corners always, very subtle scale on hover */
.editorial-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.editorial-frame { overflow: hidden; }
.editorial-frame:hover .editorial-img { transform: scale(1.02); }

/* Thin underline that grows on hover, for inline text links */
.link-grow {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.link-grow::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1px;
  background: currentColor;
  transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.link-grow:hover::after { width: 100%; }

/* Nav — background/border shift on scroll only. The "Stories Worth Visiting"
   tagline under the logo always stays visible, on every screen size. */
#navbar { transition: background-color 0.5s ease, border-color 0.5s ease; }

input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 1px solid #19372F;
  outline-offset: 3px;
}

.mobile-link { transition: color 0.2s ease; }
.mobile-link:hover { color: #19372F; }