/* ============================================
   Stories — Royal Editorial Overrides
   Aligns hero and cards with announcement2.css
   ============================================ */

/* Hero typography parity with announcement2 */
.stories-hero { background: var(--a2-ivory); }

.stories-hero .ann2-hero__title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 72px);
  line-height: 1.06;
  letter-spacing: -0.012em;
}
.stories-hero .ann2-hero__title em {
  font-style: italic;
  color: var(--a2-red);
  font-weight: 500;
}

.stories-hero .ann2-hero__eyebrow {
  font-size: 11px;
  letter-spacing: 0.5em;
  color: var(--a2-gold-deep);
}

.stories-hero .ann2-hero__body {
  font-size: 17px;
  line-height: 1.85;
  color: #4a4030;
  max-width: 560px;
}

/* Signature Experiences — gold-dot prefix */
.stories-filter--signature::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--a2-gold-deep, #c9a961);
  box-shadow: 0 0 6px rgba(201, 169, 97, 0.45);
  vertical-align: middle;
  transform: translateY(-1px) scale(1);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.stories-filter--signature:hover::before,
.stories-filter--signature:focus-visible::before,
.stories-filter--signature.is-active::before {
  transform: translateY(-1px) scale(1.15);
  box-shadow: 0 0 9px rgba(201, 169, 97, 0.65);
}
@media (prefers-reduced-motion: reduce) {
  .stories-filter--signature::before { transition: none; }
}

/* Responsive crop for hero on small screens */
@media (max-width: 900px) {
  .stories-hero { padding: 64px 0 84px; min-height: auto; }
  .stories-hero .ann2-hero__img { object-position: center 50%; }
}
@media (max-width: 640px) {
  .stories-hero { padding: 48px 0 64px; }
  .stories-hero .ann2-hero__title { font-size: clamp(34px, 9vw, 44px); }
  .stories-hero .ann2-hero__body { font-size: 15.5px; line-height: 1.75; }
  .stories-hero .ann2-hero__img { object-position: center 55%; }
}

/* Reduced motion respect (already in announcement2.css, reinforce) */
@media (prefers-reduced-motion: reduce) {
  .stories-hero .ann2-hero__img { animation: none !important; transform: scale(1.04) !important; }
  .stories-hero .ann2-hero__content { animation: none !important; }
}

/* ============================================
   Story cards — editorial journal styling
   ============================================ */
.stories-listing { background: var(--a2-ivory); padding: 4rem 0 2rem; }

.stories-grid .story-card {
  position: relative;
  padding-top: 18px;
  border-top: 1px solid var(--a2-line);
  transition: opacity 360ms ease, transform 420ms cubic-bezier(.22,1,.36,1);
  outline: none;
  border-radius: 2px;
}

/* Quiet, accessible focus ring — gold rule, never harsh blue */
.stories-grid .story-card:focus-visible {
  outline: 2px solid var(--a2-gold);
  outline-offset: 6px;
}

/* Subtle editorial lift — almost imperceptible, never bouncy */
.stories-grid .story-card:hover {
  transform: translateY(-2px);
}

/* Gold accent rule that grows on hover */
.stories-grid .story-card::before {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  height: 2px; width: 0;
  background: linear-gradient(90deg, var(--a2-gold) 0%, var(--a2-gold-deep) 100%);
  transition: width 520ms cubic-bezier(.22,1,.36,1);
}
.stories-grid .story-card:hover,
.stories-grid .story-card:focus-visible { opacity: 1; }
.stories-grid .story-card:hover::before,
.stories-grid .story-card:focus-visible::before { width: 56px; }

.stories-grid .story-card__image-wrapper {
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  margin-bottom: 1.25rem;
  overflow: hidden;
  position: relative;
}
/* Soft warm wash on hover — keeps contrast for category/title text */
.stories-grid .story-card__image-wrapper::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,16,10,0) 60%, rgba(20,16,10,0.18) 100%);
  opacity: 0;
  transition: opacity 420ms ease;
  pointer-events: none;
}
.stories-grid .story-card:hover .story-card__image-wrapper::after,
.stories-grid .story-card:focus-visible .story-card__image-wrapper::after {
  opacity: 1;
}
.stories-grid .story-card__image {
  transition: transform 1.2s cubic-bezier(.22,1,.36,1), filter 600ms ease;
  filter: saturate(0.92) brightness(0.98);
}
.stories-grid .story-card:hover .story-card__image {
  transform: scale(1.035);
  filter: saturate(1) brightness(1);
}

.stories-grid .story-card__category {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--a2-gold-deep);
  font-weight: 500;
  margin-bottom: 0.6rem;
}

.stories-grid .story-card__title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--a2-ink);
  margin-bottom: 0.65rem;
  transition: color 320ms ease;
}
.stories-grid .story-card:hover .story-card__title {
  color: var(--a2-red);
}

.stories-grid .story-card__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  line-height: 1.75;
  color: #6a6050;
  font-weight: 300;
  margin-bottom: 1.1rem;
}

/* Mini gold rule between excerpt and footer */
.stories-grid .story-card__footer {
  position: relative;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(181, 137, 57, 0.18);
}

.stories-grid .story-card__reading-time {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--a2-muted);
}
.stories-grid .story-card__reading-time svg { color: var(--a2-gold); opacity: 0.85; }

.stories-grid .story-card__read-more {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  color: var(--a2-gold-deep);
  transition: color 280ms ease, transform 280ms ease;
}
.stories-grid .story-card__arrow {
  display: inline-block;
  margin-left: 4px;
  color: var(--a2-gold);
  transition: transform 360ms cubic-bezier(.22,1,.36,1);
}
.stories-grid .story-card:hover .story-card__read-more { color: var(--a2-red); }
.stories-grid .story-card:hover .story-card__arrow { transform: translateX(6px); }

/* Newly appended (infinite scroll) cards fade-in */
.stories-grid .story-card.is-appended {
  opacity: 0;
  transform: translateY(14px);
  animation: storyCardEnter 700ms cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes storyCardEnter {
  to { opacity: 1; transform: translateY(0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .stories-grid .story-card__image,
  .stories-grid .story-card__title,
  .stories-grid .story-card__read-more,
  .stories-grid .story-card__arrow,
  .stories-grid .story-card { transition: none !important; transform: none !important; }
  .stories-grid .story-card:hover { transform: none !important; }
  .stories-grid .story-card__image-wrapper::after { transition: none !important; }
  .stories-grid .story-card.is-appended { animation: none; opacity: 1; transform: none; }
}

/* List view tweaks to match editorial tone */
.stories-grid.is-list .story-card {
  padding: 2rem 0;
  border-top: 1px solid var(--a2-line);
  border-bottom: none;
}
.stories-grid.is-list .story-card::before { display: none; }

/* ============================================
   Category sub-nav (links to landing pages)
   Quiet, editorial — sits between filters and grid
   ============================================ */
.stories-cat-nav {
  background: var(--a2-ivory);
  border-top: 1px solid var(--a2-line);
  border-bottom: 1px solid var(--a2-line);
  padding: 14px 0;
}
.stories-cat-nav .container {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 12px 22px;
}
.stories-cat-nav__label {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--a2-gold-deep);
  font-weight: 500;
}
.stories-cat-nav__list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: 4px 18px;
}
.stories-cat-nav__list a {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 15.5px;
  color: var(--a2-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  transition: color 220ms ease, border-color 220ms ease;
}
.stories-cat-nav__list a:hover,
.stories-cat-nav__list a:focus-visible {
  color: var(--a2-red);
  border-bottom-color: var(--a2-gold);
  outline: none;
}
.stories-cat-nav__list a:focus-visible {
  outline: 2px solid var(--a2-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

/* Stronger focus for filter buttons (keyboard) */
.stories-filter:focus-visible {
  outline: 2px solid var(--a2-gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.stories-filter[aria-pressed="true"] {
  /* Visual parity with .is-active (kept) for screen readers + visual users */
}

@media (prefers-reduced-motion: reduce) {
  .stories-cat-nav__list a { transition: none !important; }
}


/* ============================================
   CAT-LANDING POLISH
   Shared focus / motion rules for category landing pages
   ============================================ */
.cat-card:focus-visible {
  outline: 2px solid var(--s3-gold, #b58939);
  outline-offset: 6px;
  border-radius: 2px;
}
.cat-card:focus-visible .cat-card__title { color: var(--s3-gold, #b58939); }

/* Skip link — visually hidden until focused */
.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 9999;
  background: var(--a2-ivory, #f6efe2);
  color: var(--a2-ink, #1f1a12);
  padding: 10px 18px;
  border: 1px solid var(--a2-gold, #c9a961);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  left: 16px;
  outline: 2px solid var(--a2-gold, #c9a961);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cat-hero__img { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .cat-card__media img,
  .cat-card .arrow { transition: none !important; transform: none !important; }
}