/* Rawana — the Journal archive.

   The article list is the one page on this site where the visitor is
   browsing rather than being sold to, so it is built to be scanned: a
   quiet hero, a sticky topic filter, one featured piece, then a grid.
   Everything below reads from the theme's own tokens, so restyling the
   site in Global Styles restyles the Journal with it. */

:root { --rwn-ease: cubic-bezier(.22, .61, .36, 1); }

.rwn-jr *,
.rwn-jr *::before,
.rwn-jr *::after { box-sizing: border-box; }

/* ---------- hero ----------
   The glow behind the title is two soft radial washes, one gold and one
   deep green, sitting on their own layer so they can never intercept a
   click. `isolation` keeps the negative z-index inside this group instead
   of sliding behind the page background. */
.rwn-jr-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--wp--preset--spacing--110) var(--wp--preset--spacing--70);
}
.rwn-jr-hero::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 80vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 22% 30%, rgba(253, 184, 19, .16), transparent 70%),
    radial-gradient(50% 50% at 82% 10%, rgba(16, 56, 47, .85), transparent 72%);
  filter: blur(8px);
}
.rwn-jr-eyebrow {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 var(--wp--preset--spacing--50);
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
}
.rwn-jr-eyebrow::after {
  content: "";
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(90deg, var(--wp--preset--color--accent-deep), transparent);
}
.rwn-jr-h1 {
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 16ch;
  font-size: clamp(2.875rem, 1.9rem + 4.3vw, 5.5rem);
  line-height: .98;
  letter-spacing: -.03em;
  font-weight: 600;
}
.rwn-jr-h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--wp--preset--color--accent-bright), var(--wp--preset--color--accent-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rwn-jr-lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.1875rem);
  color: var(--wp--preset--color--muted);
}

/* ---------- filter bar ----------
   Sticky so the topics stay reachable while scrolling a long archive.
   The blur is progressive enhancement: without it the bar is simply
   opaque, which is still legible on this palette. */
.rwn-jr-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: var(--wp--preset--spacing--80);
  padding-block: .9rem;
  background: rgba(4, 13, 11, .72);
  border-block: 1px solid rgba(244, 241, 234, .07);
}
@supports (backdrop-filter: blur(1px)) {
  .rwn-jr-bar { backdrop-filter: blur(14px) saturate(1.4); }
}
.rwn-jr-bar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.rwn-jr-pill {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  background: transparent;
  border: 1px solid rgba(244, 241, 234, .14);
  border-radius: 999px;
  transition:
    color .35s var(--rwn-ease),
    border-color .35s var(--rwn-ease),
    background .35s var(--rwn-ease),
    transform .35s var(--rwn-ease);
}
.rwn-jr-pill em {
  font-style: normal;
  font-size: .6875rem;
  color: var(--wp--preset--color--dim);
  transition: color .35s var(--rwn-ease);
}
.rwn-jr-pill:hover {
  color: var(--wp--preset--color--contrast);
  border-color: rgba(253, 184, 19, .45);
  transform: translateY(-1px);
}
.rwn-jr-pill.is-on {
  color: var(--wp--preset--color--accent-ink);
  background: var(--wp--preset--color--accent);
  border-color: var(--wp--preset--color--accent);
}
.rwn-jr-pill.is-on em { color: rgba(26, 18, 3, .6); }
.rwn-jr-pill:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-bright);
  outline-offset: 3px;
}

/* ---------- featured ---------- */
.rwn-jr-feat {
  align-items: center;
  margin-bottom: var(--wp--preset--spacing--90);
  padding-bottom: var(--wp--preset--spacing--80);
  border-bottom: 1px solid rgba(244, 241, 234, .08);
}
.rwn-jr-feat .rwn-jr-feat__media { position: relative; }
.rwn-jr-feat__media img {
  border-radius: 14px;
  transition: transform 1.1s var(--rwn-ease);
}
.rwn-jr-feat:hover .rwn-jr-feat__media img { transform: scale(1.04); }
.rwn-jr-feat__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  background: linear-gradient(105deg, rgba(4, 13, 11, .55), transparent 55%);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .09);
}
.rwn-jr-flag {
  display: inline-block;
  margin: 0 0 .35rem;
  padding: .35rem .7rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent-ink);
  background: var(--wp--preset--color--accent);
  border-radius: 999px;
}
.rwn-jr-feat__title {
  margin: .85rem 0 1rem;
  font-size: clamp(1.875rem, 1.5rem + 1.7vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 600;
}
.rwn-jr-feat__excerpt {
  margin: 0 0 var(--wp--preset--spacing--50);
  max-width: 46ch;
  color: var(--wp--preset--color--muted);
}
.rwn-jr-feat__excerpt .wp-block-post-excerpt__more-text { display: none; }
.rwn-jr-more a,
a.rwn-jr-more {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding-bottom: .3rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(253, 184, 19, .35);
  transition: gap .4s var(--rwn-ease), border-color .4s var(--rwn-ease);
}
.rwn-jr-feat:hover .rwn-jr-more a { gap: 1.1rem; border-color: var(--wp--preset--color--accent); }

/* ---------- grid ----------
   Core's grid layout supplies the columns from minimumColumnWidth, so the
   archive reflows without a single media query and the owner can change
   the column width from the editor. */
.rwn-jr-grid { padding-bottom: var(--wp--preset--spacing--110); }
.rwn-jr-grid > .wp-block-post {
  transition: opacity .5s var(--rwn-ease), transform .5s var(--rwn-ease);
}
.rwn-jr-grid > .wp-block-post.rwn-is-hidden { display: none; }
.rwn-jr-card__media { position: relative; margin-bottom: 1.15rem; }
.rwn-jr-card__media img {
  border-radius: 12px;
  transition: transform 1s var(--rwn-ease);
}
.rwn-jr-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, .08);
  background: linear-gradient(180deg, transparent 55%, rgba(4, 13, 11, .5));
}
.wp-block-post:hover .rwn-jr-card__media img { transform: scale(1.06); }
.rwn-jr-card__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .6rem;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wp--preset--color--dim);
}
.rwn-jr-card__meta .wp-block-post-terms__separator { display: none; }
.rwn-jr-topic,
.rwn-jr-topic a {
  color: var(--wp--preset--color--accent);
  text-decoration: none;
}
/* The separator between topic and reading time is drawn by the reading-time
   element rather than sitting in the markup as its own block: one less thing
   for the owner to delete by accident, and it cannot end up orphaned when a
   post has no category. */
.rwn-jr-card__meta .rwn-jr-readtime {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
}
.rwn-jr-card__meta .rwn-jr-readtime::before {
  content: "";
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--wp--preset--color--dim);
}
.rwn-jr-card__meta .wp-block-post-terms:empty + .rwn-jr-readtime::before { display: none; }
.rwn-jr-card__title {
  margin: 0 0 .6rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  font-weight: 600;
}
/* The underline sweeps in from the left on hover. Drawn as a background
   image so it animates on size rather than on a layout property. */
.rwn-jr-card__title a {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .55s var(--rwn-ease);
}
.wp-block-post:hover .rwn-jr-card__title a { background-size: 100% 1px; }
.rwn-jr-card__excerpt {
  margin: 0;
  font-size: .9375rem;
  color: var(--wp--preset--color--muted);
}
.rwn-jr-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.rwn-jr-grid a:focus-visible,
.rwn-jr-feat a:focus-visible {
  outline: 2px solid var(--wp--preset--color--accent-bright);
  outline-offset: 6px;
  border-radius: 4px;
}

/* ---------- entrance ----------
   Cards fade up as they enter the viewport, staggered by --rwn-d which the
   behaviour snippet sets per card. The no-JS and reduced-motion paths both
   land on the finished state, never the hidden one. */
.rwn-jr-reveal { opacity: 0; transform: translateY(22px); }
.rwn-jr-reveal.rwn-in {
  opacity: 1;
  transform: none;
  transition:
    opacity .75s var(--rwn-ease) var(--rwn-d, 0ms),
    transform .75s var(--rwn-ease) var(--rwn-d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  .rwn-jr-reveal,
  .rwn-jr-reveal.rwn-in { opacity: 1; transform: none; transition: none; }
  .rwn-jr * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media (max-width: 640px) {
  .rwn-jr-bar { margin-bottom: var(--wp--preset--spacing--60); }
  .rwn-jr-feat { margin-bottom: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--60); }
}

/* The editor renders these blocks outside the .rwn-jr wrapper's cascade in
   some views; the reveal must never hide content from the owner. */
.editor-styles-wrapper .rwn-jr-reveal { opacity: 1; transform: none; }