/*
 * RAVA Brand Manual v1 — approved public UI refresh.
 * Final presentation authority for the public shell, Discover, public cards,
 * compact institutional footer, responsive navigation and action feedback.
 */

:root {
  --rava-color-canvas: #F4F1EA;
  --rava-color-surface: #FBFAF7;
  --rava-color-text: #171A17;
  --rava-color-text-muted: #5F6B73;
  --rava-color-accent: #214C3C;
  --rava-color-danger: #7A3941;
  --rava-color-warning: #7E5B19;
  --rava-color-support: #B7C1B4;
  --rava-font-ui: Vazirmatn, Tahoma, Arial, sans-serif;
  --rava-font-display: Vazirmatn, Tahoma, Arial, sans-serif;
  --rava-motion-fast: 160ms;
  --rava-motion-normal: 180ms;
  --rava-motion-slow: 200ms;
  --rava-duration-fast: 160ms;
  --rava-duration: 180ms;
  --rava-control-height: 48px;
  --rava-control-h: 48px;
  --rava-ease-standard: cubic-bezier(.2,.8,.2,1);
}

body {
  background: var(--rava-color-canvas);
  color: var(--rava-color-text);
  font-family: var(--rava-font-ui);
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--rava-font-ui);
  font-weight: 700;
}

/* Global action language: one clear Forest primary, quieter secondary actions. */
.rava-button {
  min-block-size: 48px;
  padding-inline: 1.15rem;
  border: 1px solid var(--rava-color-accent);
  border-radius: 6px;
  box-shadow: none;
  font-family: var(--rava-font-ui);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  transition:
    background var(--rava-motion-normal) var(--rava-ease-standard),
    border-color var(--rava-motion-normal) var(--rava-ease-standard),
    color var(--rava-motion-normal) var(--rava-ease-standard),
    transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-button-primary {
  border-color: var(--rava-color-accent);
  background: var(--rava-color-accent);
  color: var(--rava-color-surface);
}
.rava-button-primary:is(:hover,:focus-visible) {
  border-color: var(--rava-color-accent);
  background: var(--rava-color-accent);
  color: var(--rava-color-surface);
  transform: translateY(-1px);
}
.rava-button-secondary {
  border-color: color-mix(in srgb, var(--rava-color-accent) 32%, var(--rava-color-surface));
  background: var(--rava-color-surface);
  color: var(--rava-color-accent);
}
.rava-button-secondary:is(:hover,:focus-visible) {
  border-color: var(--rava-color-accent);
  background: color-mix(in srgb, var(--rava-color-accent) 7%, var(--rava-color-surface));
  color: var(--rava-color-accent);
  transform: translateY(-1px);
}
.rava-button:focus-visible {
  outline: 2px solid var(--rava-color-accent);
  outline-offset: 3px;
}

/* Header: mark only, quieter current-state navigation, no duplicate descriptor. */
.rava-system-header {
  background: color-mix(in srgb, var(--rava-color-canvas) 92%, transparent);
  border-block-end-color: color-mix(in srgb, var(--rava-color-text) 9%, transparent);
  backdrop-filter: blur(16px) saturate(115%);
}
.rava-system-header .rava-wordmark { gap: 0; }
.rava-system-header .rava-wordmark .rava-brand-mark {
  inline-size: 48px;
  block-size: 48px;
  flex-basis: 48px;
}
.rava-system-menu > li > a {
  position: relative;
  color: var(--rava-color-text);
  transition: color var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-system-menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: .2rem;
  inset-block-end: .35rem;
  block-size: 1px;
  background: var(--rava-color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-system-menu > li > a:is(:hover,:focus-visible),
.rava-system-menu > li > a[aria-current="page"] { color: var(--rava-color-accent); }
.rava-system-menu > li > a:is(:hover,:focus-visible)::after,
.rava-system-menu > li > a[aria-current="page"]::after { transform: scaleX(1); }
.rava-system-header .rava-icon-button {
  transition: color var(--rava-motion-normal) var(--rava-ease-standard), background var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-system-header .rava-icon-button:is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--rava-color-accent) 7%, transparent);
  color: var(--rava-color-accent);
}

/* Keep public desktop/tablet navigation complete when the legacy shell hides it below 1180px. */
@media (min-width: 901px) and (max-width: 1180px) {
  body.rava-shell-context-public .rava-header-shell {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(.65rem, 1.4vw, 1.1rem);
  }
  body.rava-shell-context-public .rava-primary-nav { display: block; justify-self: center; }
  body.rava-shell-context-public .rava-system-menu { gap: clamp(.5rem, 1vw, .85rem); }
  body.rava-shell-context-public .rava-system-menu > li > a {
    min-height: 48px;
    padding-inline: .08rem;
    font-size: clamp(.72rem, 1.05vw, .82rem);
  }
  body.rava-shell-context-public .rava-menu-toggle { display: none !important; }
}

/* Discover: shorter opening and useful intent routes in the first viewport. */
body.rava-native-public-discover .p21-hero {
  padding-block: clamp(28px, 3.5vw, 52px) clamp(32px, 4vw, 58px);
}
body.rava-native-public-discover .p21-hero__grid {
  grid-template-columns: minmax(0, .95fr) minmax(300px, .62fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
body.rava-native-public-discover .p21-hero__copy { align-self: center; }
body.rava-native-public-discover .p21-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(2.7rem, 5.1vw, 5rem);
  line-height: 1.06;
}
body.rava-native-public-discover .p21-specimen {
  max-width: 430px;
  justify-self: end;
  border-color: color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  background: var(--rava-color-surface);
}
body.rava-native-public-discover .p21-specimen__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rava-color-surface);
}
body.rava-native-public-discover .p21-specimen__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  transition: transform var(--rava-motion-slow) var(--rava-ease-standard);
}
body.rava-native-public-discover .p21-specimen:is(:hover,:focus-within) .p21-specimen__media img { transform: scale(1.015); }
body.rava-native-public-discover .p21-specimen__caption { padding: 1rem 1.1rem 1.15rem; }
body.rava-native-public-discover .p21-specimen__caption h2 { margin-block: .3rem .2rem; font-size: 1.3rem; }
body.rava-native-public-discover .p21-specimen__caption p { margin: 0; color: var(--rava-color-text-muted); font-size: .78rem; }
body.rava-native-public-discover .p21-specimen__facts { margin-block-start: .75rem; }

.p21-discovery-directions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: clamp(24px, 3vw, 40px);
  border-block: 1px solid color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  background: color-mix(in srgb, var(--rava-color-text) 10%, transparent);
}
.p21-discovery-directions > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "kicker arrow" "copy arrow";
  gap: .35rem 1rem;
  min-height: 92px;
  padding: 1rem 1.05rem;
  background: var(--rava-color-canvas);
  transition: background var(--rava-motion-normal) var(--rava-ease-standard), color var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-discovery-directions > a .p2-kicker { grid-area: kicker; }
.p21-discovery-directions > a strong { grid-area: copy; max-width: 28ch; font-size: .86rem; font-weight: 600; line-height: 1.75; }
.p21-discovery-directions__arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--rava-color-accent);
  font-size: 1.1rem;
  transition: transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-discovery-directions > a:is(:hover,:focus-visible) { background: var(--rava-color-surface); color: var(--rava-color-accent); }
.p21-discovery-directions > a:is(:hover,:focus-visible) .p21-discovery-directions__arrow { transform: translateX(-3px); }

/* Today in the Archive: title and action share one line, cards are calmer and shorter. */
body.rava-native-public-discover .p21-section--records { padding-block: clamp(40px, 5vw, 68px); }
body.rava-native-public-discover .p21-section--records .p21-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-end: 1.15rem;
}
body.rava-native-public-discover .p21-section--records .p21-section__head .p2-kicker { margin: 0; }
body.rava-native-public-discover .p21-section--records .p21-section__head .rava-button { flex: 0 0 auto; }
body.rava-native-public-discover .p21-coffee-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

/* Shared public Coffee preview. */
.p21-coffee-card {
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  background: var(--rava-color-surface);
  box-shadow: none;
  overflow: clip;
  transition:
    border-color var(--rava-motion-normal) var(--rava-ease-standard),
    transform var(--rava-motion-normal) var(--rava-ease-standard),
    background var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-coffee-card:is(:hover,:focus-within) {
  border-color: color-mix(in srgb, var(--rava-color-accent) 55%, var(--rava-color-surface));
  transform: translateY(-2px);
}
.p21-coffee-card__media { block-size: clamp(210px, 20vw, 270px); background: var(--rava-color-surface); }
.p21-coffee-card__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  transition: transform var(--rava-motion-slow) var(--rava-ease-standard);
}
.p21-coffee-card:is(:hover,:focus-within) .p21-coffee-card__media img { transform: scale(1.015); }
.p21-coffee-card__body { padding: 1rem 1.05rem 1.05rem; }
.p21-coffee-card__body > h3 { margin: 0; font-size: 1.15rem; line-height: 1.5; }
.p21-coffee-card__identity { margin: .32rem 0 0; color: var(--rava-color-text-muted); font-size: .74rem; line-height: 1.7; }
.p21-coffee-card__roastery {
  color: var(--rava-color-accent);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--rava-color-accent) 28%, transparent);
  text-underline-offset: .24em;
}
.p21-coffee-card__notes { margin-block-start: .75rem; }
.p21-coffee-card__notes > span { font-size: .68rem; }
.p21-coffee-card__evidence {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  margin-block-start: .9rem;
  padding-block-start: .85rem;
  border-block-start: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent);
}
.p21-coffee-card__evidence > div:first-child strong { display: block; font-size: .98rem; }
.p21-coffee-card__evidence > div:first-child span { display: block; margin-block-start: .15rem; color: var(--rava-color-text-muted); font-size: .64rem; }
.p21-coffee-card__price { text-align: end; }
.p21-coffee-card__price small { display: block; color: var(--rava-color-text-muted); font-size: .62rem; }
.p21-coffee-card__price strong { display: block; margin-block-start: .12rem; color: var(--rava-color-text); font-size: 1rem; font-weight: 700; white-space: nowrap; }
.p21-coffee-card__price .p21-coffee-card__pack { display: block; margin-block-start: .12rem; color: var(--rava-color-text-muted); font-size: .65rem; }
.p21-coffee-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin-block-start: .9rem;
}
.p21-coffee-card__actions .p21-coffee-card__primary-action {
  grid-column: 1 / -1;
  inline-size: 100%;
}
.p21-coffee-card__actions .p2-save-button,
.p21-coffee-card__actions .p2-compare-button {
  inline-size: 100%;
  min-block-size: 48px;
  gap: .45rem;
  padding-inline: .65rem;
  border: 1px solid color-mix(in srgb, var(--rava-color-accent) 28%, var(--rava-color-surface));
  border-radius: 6px;
  background: transparent;
  color: var(--rava-color-text);
  font: 500 .76rem/1.2 var(--rava-font-ui);
  transition: background var(--rava-motion-normal) var(--rava-ease-standard), border-color var(--rava-motion-normal) var(--rava-ease-standard), color var(--rava-motion-normal) var(--rava-ease-standard), transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-coffee-card__actions .p2-save-button:is(:hover,:focus-visible),
.p21-coffee-card__actions .p2-compare-button:is(:hover,:focus-visible),
.p21-coffee-card__actions .p2-save-button.is-saved,
.p21-coffee-card__actions .p2-compare-button.is-active {
  border-color: var(--rava-color-accent);
  background: color-mix(in srgb, var(--rava-color-accent) 8%, var(--rava-color-surface));
  color: var(--rava-color-accent);
}
.p21-coffee-card__actions .p2-save-button:active,
.p21-coffee-card__actions .p2-compare-button:active { transform: translateY(1px); }
.p21-coffee-card__actions .p2-save-button:focus-visible,
.p21-coffee-card__actions .p2-compare-button:focus-visible,
.p21-builder-row:focus-visible,
.p21-discovery-directions > a:focus-visible,
.rava-mobile-nav-item:focus-visible,
.rava-institutional-footer .rava-footer-primary-nav a:focus-visible {
  outline: 2px solid var(--rava-color-accent);
  outline-offset: 3px;
}

/* Contributors: institutional copy, clearly interactive roastery rows. */
body.rava-native-public-discover .p21-section--builders { padding-block: clamp(42px, 6vw, 76px); }
body.rava-native-public-discover .p21-builders { gap: clamp(24px, 4vw, 64px); }
body.rava-native-public-discover .p21-builders__intro p {
  max-width: 58ch;
  margin: .8rem 0 0;
  color: var(--rava-color-text-muted);
  font-size: .92rem;
  line-height: 2;
}
.p21-builder-row {
  grid-template-columns: 2.2rem 3rem minmax(0, 1fr) auto 1.6rem;
  gap: .9rem;
  align-items: center;
  min-height: 76px;
  padding: .65rem .75rem;
  border-block-end: 1px solid color-mix(in srgb, var(--rava-color-text) 11%, transparent);
  background: transparent;
  transition: background var(--rava-motion-normal) var(--rava-ease-standard), border-color var(--rava-motion-normal) var(--rava-ease-standard), transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-builder-row:first-child { border-block-start: 1px solid color-mix(in srgb, var(--rava-color-text) 11%, transparent); }
.p21-builder-row:is(:hover,:focus-visible) {
  border-color: color-mix(in srgb, var(--rava-color-accent) 58%, transparent);
  background: var(--rava-color-surface);
  transform: translateY(-1px);
}
.p21-builder-row__copy strong { color: var(--rava-color-text); font-weight: 600; }
.p21-builder-row__copy small { color: var(--rava-color-text-muted); }
.p21-builder-row__arrow { color: var(--rava-color-accent); transition: transform var(--rava-motion-normal) var(--rava-ease-standard); }
.p21-builder-row:is(:hover,:focus-visible) .p21-builder-row__arrow { transform: translateX(-3px); }

/* Compact institutional footer; future About/Contact/Rules appear only when published. */
.rava-institutional-footer {
  padding: 0;
  background: var(--rava-color-text);
  color: var(--rava-color-surface);
}
.rava-institutional-footer .rava-footer-shell { padding-block: 1.35rem 1rem; }
.rava-institutional-footer .rava-footer-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 0;
}
.rava-institutional-footer .rava-footer-statement {
  display: block;
  max-width: 38rem;
  margin: 0;
  padding: 0;
  color: color-mix(in srgb, var(--rava-color-surface) 78%, transparent);
  font-family: var(--rava-font-ui);
  font-size: .88rem;
  font-weight: 500;
  line-height: 1.75;
}
.rava-institutional-footer .rava-footer-primary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .4rem 1.2rem;
}
.rava-institutional-footer .rava-footer-primary-nav a {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--rava-color-surface);
  font-size: .76rem;
  font-weight: 500;
  transition: color var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-institutional-footer .rava-footer-primary-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 4px;
  block-size: 1px;
  background: var(--rava-color-support);
  transform: scaleX(0);
  transition: transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-institutional-footer .rava-footer-primary-nav a:is(:hover,:focus-visible) { color: var(--rava-color-surface); }
.rava-institutional-footer .rava-footer-primary-nav a:is(:hover,:focus-visible)::after { transform: scaleX(1); }
.rava-institutional-footer .rava-footer-secondary {
  margin-block-start: .65rem;
  padding-block-start: .65rem;
  border-block-start: 1px solid rgb(251 250 247 / 12%);
  color: rgb(251 250 247 / 42%);
  font: 400 .64rem/1.5 var(--rava-font-ui);
}

/* Save / Compare feedback with close, Undo and a visible timeout. */
.rava-action-snackbar {
  position: fixed;
  z-index: 10040;
  inset-inline-end: 24px;
  inset-block-end: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .55rem;
  width: min(420px, calc(100vw - 32px));
  min-height: 58px;
  padding: .65rem .65rem .65rem .9rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rava-color-surface) 18%, transparent);
  border-radius: 8px;
  background: var(--rava-color-text);
  color: var(--rava-color-surface);
  box-shadow: 0 14px 38px rgb(23 26 23 / 16%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--rava-motion-normal) var(--rava-ease-standard), transform var(--rava-motion-normal) var(--rava-ease-standard), visibility 0s linear var(--rava-motion-normal);
}
.rava-action-snackbar.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.rava-action-snackbar__message { min-width: 0; font-size: .78rem; line-height: 1.65; }
.rava-action-snackbar__undo,
.rava-action-snackbar__close {
  min-width: 48px;
  min-height: 48px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
}
.rava-action-snackbar__undo { min-width: auto; padding-inline: .7rem; color: var(--rava-color-support); font-weight: 600; }
.rava-action-snackbar__undo:is(:hover,:focus-visible),
.rava-action-snackbar__close:is(:hover,:focus-visible) { background: rgb(251 250 247 / 10%); }
.rava-action-snackbar__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 2px;
  background: var(--rava-color-support);
  transform-origin: right;
  animation: rava-snackbar-progress 4s linear forwards;
}
@keyframes rava-snackbar-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Public mobile is intentionally designed, not compressed desktop. */
@media (max-width: 900px) {
  body.rava-shell-context-public .rava-system-header .rava-header-shell {
    grid-template-columns: auto 1fr;
    min-height: 64px;
    gap: .6rem;
  }
  body.rava-shell-context-public .rava-system-header .rava-wordmark .rava-brand-mark {
    inline-size: 48px;
    block-size: 48px;
    flex-basis: 48px;
  }
  body.rava-shell-context-public .rava-system-header .rava-header-actions { justify-self: end; gap: 0; }
  body.rava-shell-context-public .rava-system-header .rava-workspace-entry,
  body.rava-shell-context-public .rava-system-header .rava-saved-button,
  body.rava-shell-context-public .rava-system-header .rava-environment-trigger,
  body.rava-shell-context-public .rava-system-header .rava-menu-toggle { display: none !important; }
  body.rava-shell-context-public .rava-system-header .rava-cart-button { display: inline-flex !important; }
  body.rava-shell-context-public .rava-system-header .rava-icon-button {
    inline-size: 48px;
    block-size: 48px;
    min-inline-size: 48px;
    min-block-size: 48px;
  }

  body.rava-shell-context-public .rava-mobile-bottom-nav {
    position: fixed;
    z-index: 10010;
    inset-inline-start: 50%;
    inset-block-end: calc(10px + var(--rava-safe-bottom));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(520px, calc(100vw - 24px));
    min-height: 64px;
    padding: 6px;
    border: 1px solid rgb(23 26 23 / 12%);
    border-radius: 22px;
    background: rgb(251 250 247 / 88%);
    box-shadow: 0 12px 34px rgb(23 26 23 / 11%);
    backdrop-filter: blur(18px) saturate(120%);
    transform: translateX(-50%);
  }
  body.rava-shell-context-public .rava-mobile-nav-item {
    min-width: 0;
    min-height: 52px;
    display: grid;
    grid-template-rows: 22px auto;
    place-items: center;
    gap: 2px;
    padding: 5px 3px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--rava-color-text-muted);
    font-size: .64rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background var(--rava-motion-normal) var(--rava-ease-standard), color var(--rava-motion-normal) var(--rava-ease-standard), transform var(--rava-motion-normal) var(--rava-ease-standard);
  }
  body.rava-shell-context-public .rava-mobile-nav-item .rava-svg-icon { inline-size: 20px; block-size: 20px; }
  body.rava-shell-context-public .rava-mobile-nav-item:is(.is-active,[aria-current="page"]) {
    background: var(--rava-color-accent);
    color: var(--rava-color-surface);
  }
  body.rava-shell-context-public .rava-mobile-nav-item:active { transform: scale(.98); }

  body.rava-native-public-discover .p21-hero { padding-block: 22px 30px; }
  body.rava-native-public-discover .p21-hero__grid { grid-template-columns: 1fr; gap: 18px; }
  body.rava-native-public-discover .p21-hero h1 { max-width: 12ch; font-size: clamp(2.1rem, 10vw, 3rem); line-height: 1.12; }
  .p21-discovery-directions { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 18px; }
  .p21-discovery-directions > a { min-height: 82px; padding: .75rem; gap: .25rem .5rem; }
  .p21-discovery-directions > a strong { font-size: .72rem; line-height: 1.65; }
  .p21-discovery-directions__arrow { font-size: .95rem; }

  body.rava-native-public-discover .p21-specimen {
    max-width: none;
    justify-self: stretch;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
  }
  body.rava-native-public-discover .p21-specimen__media { aspect-ratio: auto; min-height: 138px; }
  body.rava-native-public-discover .p21-specimen__caption { padding: .8rem .9rem; align-self: center; }
  body.rava-native-public-discover .p21-specimen__caption h2 { font-size: 1.05rem; }
  body.rava-native-public-discover .p21-specimen__facts { display: none; }

  body.rava-native-public-discover .p21-section--records { padding-block: 34px 44px; }
  body.rava-native-public-discover .p21-section--records .p21-section__head {
    flex-direction: row;
    align-items: center;
    margin-block-end: .85rem;
  }
  body.rava-native-public-discover .p21-section--records .p21-section__head .p2-kicker { max-width: 62%; line-height: 1.55; }
  body.rava-native-public-discover .p21-section--records .p21-section__head .rava-button {
    min-block-size: 48px;
    padding-inline: .8rem;
    font-size: .72rem;
  }
  body.rava-native-public-discover .p21-section--records .p21-coffee-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 310px);
    grid-template-columns: none;
    gap: 12px;
    margin-inline: -16px;
    padding-inline: 16px;
    padding-block-end: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }
  body.rava-native-public-discover .p21-section--records .p21-coffee-grid::-webkit-scrollbar { display: none; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card { scroll-snap-align: start; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card__media { block-size: 180px; }

  .p21-coffee-card__body { padding: .85rem .9rem .9rem; }
  .p21-coffee-card__body > h3 { font-size: 1rem; }
  .p21-coffee-card__identity { text-align: right; }
  .p21-coffee-card__evidence { gap: .65rem; }
  .p21-coffee-card__actions .p21-coffee-card__primary-action { min-block-size: 48px; }
  .p21-coffee-card__actions .p2-save-button,
  .p21-coffee-card__actions .p2-compare-button { min-block-size: 48px; }

  /* Archive cards switch to compact records; the main archive remains vertical. */
  body.rava-native-public-archive .p2-coffee-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
  body.rava-native-public-archive .p21-coffee-card--archive {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
  }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__media {
    block-size: auto;
    min-height: 100%;
    border-block-end: 0;
    border-inline-end: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent);
  }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__media img { object-fit: contain; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__body { min-width: 0; padding: .75rem .8rem .8rem; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__identity > span { display: none; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__notes { margin-block-start: .55rem; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__notes > span:nth-child(n+3) { display: none; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__evidence { grid-template-columns: 1fr; margin-block-start: .65rem; padding-block-start: .65rem; gap: .45rem; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__evidence > div:first-child strong { font-size: .82rem; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__price { text-align: start; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__price strong { font-size: .85rem; white-space: normal; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__actions { margin-block-start: .65rem; gap: .4rem; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__actions .p21-coffee-card__primary-action { font-size: .72rem; }

  body.rava-native-public-discover .p21-section--builders { padding-block: 36px 48px; }
  body.rava-native-public-discover .p21-builders { display: grid; grid-template-columns: 1fr; gap: 18px; }
  body.rava-native-public-discover .p21-builders__intro p { margin-block-start: .6rem; font-size: .82rem; line-height: 1.9; }
  .p21-builder-row { grid-template-columns: 2.7rem minmax(0, 1fr) auto 1.2rem; min-height: 68px; padding-inline: .5rem; }
  .p21-builder-row__index { display: none; }
  .p21-builder-row > img { inline-size: 2.7rem; block-size: 2.7rem; }
  .p21-builder-row__count { font-size: .64rem; }

  .rava-institutional-footer .rava-footer-shell {
    padding-block: 1rem calc(86px + var(--rava-safe-bottom));
  }
  .rava-institutional-footer .rava-footer-primary { display: grid; gap: .7rem; }
  .rava-institutional-footer .rava-footer-statement { font-size: .76rem; }
  .rava-institutional-footer .rava-footer-primary-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .9rem;
  }
  .rava-institutional-footer .rava-footer-primary-nav a { min-height: 48px; font-size: .7rem; }
  .rava-institutional-footer .rava-footer-secondary { margin-block-start: .45rem; padding-block-start: .5rem; }

  .rava-action-snackbar {
    inset-inline: 12px;
    inset-block-end: calc(86px + var(--rava-safe-bottom));
    width: auto;
    max-width: none;
  }
}

@media (max-width: 390px) {
  .p21-discovery-directions > a { min-height: 78px; padding: .65rem; }
  .p21-discovery-directions > a strong { font-size: .68rem; }
  body.rava-native-public-archive .p21-coffee-card--archive { grid-template-columns: 98px minmax(0, 1fr); }
  body.rava-shell-context-public .rava-system-header .rava-icon-button { inline-size: 48px; block-size: 48px; min-inline-size: 48px; min-block-size: 48px; }
  body.rava-shell-context-public .rava-mobile-nav-item { font-size: .6rem; }
}


/* UIUX-02 — final public refinement after rendered desktop/mobile review. */
.rava-button,
.rava-button:is(:hover,:focus,:focus-visible,:active),
.p21-coffee-card__primary-action,
.p21-coffee-card__primary-action:is(:hover,:focus,:focus-visible,:active),
.p2-save-button,
.p2-compare-button {
  text-decoration: none !important;
}

/* Header states use a quiet surface shift rather than decorative underlines. */
.rava-system-menu > li > a {
  padding-inline: .62rem;
  border-radius: 7px;
  transition:
    color var(--rava-motion-normal) var(--rava-ease-standard),
    background var(--rava-motion-normal) var(--rava-ease-standard),
    transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-system-menu > li > a::after { content: none !important; display: none !important; }
.rava-system-menu > li > a:is(:hover,:focus-visible) {
  color: var(--rava-color-accent);
  background: color-mix(in srgb, var(--rava-color-accent) 7%, transparent);
  transform: translateY(-1px);
}
.rava-system-menu > li > a[aria-current="page"] {
  color: var(--rava-color-accent);
  background: color-mix(in srgb, var(--rava-color-accent) 10%, transparent);
  font-weight: 600;
}

/* Discover masthead: descriptor, directions and one record comfortably fit the first view. */
body.rava-native-public-discover .p21-hero {
  padding-block: clamp(16px, 1.7vw, 26px) clamp(22px, 2.4vw, 36px);
}
body.rava-native-public-discover .p21-hero__grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .48fr);
  gap: clamp(24px, 3.4vw, 54px);
  align-items: center;
}
body.rava-native-public-discover .p21-hero h1 {
  max-width: none;
  font-size: clamp(2.7rem, 4.15vw, 4.35rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  text-wrap: balance;
}
body.rava-native-public-discover .p21-hero__title-line { display: inline; }
body.rava-native-public-discover .p21-hero__title-line--accent { color: var(--rava-color-accent); }
body.rava-native-public-discover .p21-specimen {
  max-width: 354px;
  width: 100%;
}
body.rava-native-public-discover .p21-specimen__media { aspect-ratio: 5 / 4; }
body.rava-native-public-discover .p21-specimen__caption { padding: .8rem .9rem .9rem; }
body.rava-native-public-discover .p21-specimen__caption h2 { font-size: 1.12rem; }
body.rava-native-public-discover .p21-specimen__facts { margin-block-start: .55rem; }
.p21-discovery-directions { margin-block-start: clamp(18px, 2vw, 28px); }
.p21-discovery-directions > a { min-height: 80px; padding: .78rem .9rem; }

/* “View all” actions read as navigation, not raw boxed buttons. */
.p21-section__archive-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  color: var(--rava-color-text);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: color var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-section__archive-link .p21-section__archive-arrow {
  color: var(--rava-color-accent);
  font-size: 1rem;
  transition: transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.p21-section__archive-link:is(:hover,:focus-visible) { color: var(--rava-color-accent); }
.p21-section__archive-link:is(:hover,:focus-visible) .p21-section__archive-arrow { transform: translateX(-4px); }
.p21-section__archive-link:focus-visible { outline: 2px solid var(--rava-color-accent); outline-offset: 3px; border-radius: 5px; }

/* Secondary coffee actions stay visually selected everywhere state is synchronized. */
.p21-coffee-card__actions .p2-save-button,
.p21-coffee-card__actions .p2-compare-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.p21-coffee-card__actions .p21-card-action-icon {
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.p21-coffee-card__actions .p2-save-button.is-saved,
.p21-coffee-card__actions .p2-compare-button.is-active {
  border-color: color-mix(in srgb, var(--rava-color-accent) 78%, var(--rava-color-surface));
  background: color-mix(in srgb, var(--rava-color-accent) 12%, var(--rava-color-surface));
  color: var(--rava-color-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rava-color-accent) 12%, transparent);
}
.p21-coffee-card__actions .p2-save-button.is-saved .p21-card-action-icon { fill: currentColor; }

/* Footer navigation is quiet too: no hover underline. */
.rava-institutional-footer .rava-footer-primary-nav a {
  text-decoration: none !important;
  transition: color var(--rava-motion-normal) var(--rava-ease-standard), transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-institutional-footer .rava-footer-primary-nav a::after { content: none !important; display: none !important; }
.rava-institutional-footer .rava-footer-primary-nav a:is(:hover,:focus-visible) {
  color: var(--rava-color-support);
  transform: translateY(-1px);
}

/* Snackbar Undo is intentionally icon-only visually; its accessible name stays in markup. */
.rava-action-snackbar__undo { min-width: 48px; padding: 0; color: var(--rava-color-support); }
.rava-action-snackbar__undo svg {
  inline-size: 20px;
  block-size: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  body.rava-shell-context-public .rava-system-header .rava-header-shell { min-height: 68px; }
  body.rava-shell-context-public .rava-system-header .rava-wordmark .rava-brand-mark {
    inline-size: 52px;
    block-size: 52px;
    flex-basis: 52px;
  }
  body.rava-shell-context-public .rava-mobile-bottom-nav {
    left: 50%;
    right: auto;
    inset-inline-start: auto;
    transform: translateX(-50%);
  }

  body.rava-native-public-discover .p21-hero { padding-block: 16px 22px; }
  body.rava-native-public-discover .p21-hero__grid { gap: 14px; }
  body.rava-native-public-discover .p21-hero h1 {
    max-width: 100%;
    font-size: clamp(2rem, 9.2vw, 2.55rem);
    line-height: 1.14;
    letter-spacing: -.018em;
  }
  .p21-discovery-directions { margin-block-start: 14px; }
  .p21-discovery-directions > a { min-height: 74px; padding: .65rem .7rem; }
  .p21-discovery-directions > a strong { font-size: .7rem; line-height: 1.58; }

  body.rava-native-public-discover .p21-specimen {
    width: 100%;
    max-width: none;
    margin: 0;
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 116px;
    border-radius: 10px;
  }
  body.rava-native-public-discover .p21-specimen__media { min-height: 116px; }
  body.rava-native-public-discover .p21-specimen__caption { min-width: 0; padding: .7rem .78rem; }
  body.rava-native-public-discover .p21-specimen__caption h2 { margin-block: .2rem .12rem; font-size: 1rem; }
  body.rava-native-public-discover .p21-specimen__caption p { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  body.rava-native-public-discover .p21-section--records .p21-section__head .p2-kicker { max-width: 66%; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-grid {
    grid-auto-columns: min(74vw, 280px);
    gap: 10px;
  }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card__media { block-size: 150px; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card__body { padding: .75rem .8rem .82rem; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card__notes { margin-block-start: .55rem; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card__evidence { margin-block-start: .65rem; padding-block-start: .65rem; }
  body.rava-native-public-discover .p21-section--records .p21-coffee-card__actions { margin-block-start: .65rem; }

  .p21-section__archive-link { min-height: 48px; font-size: .72rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rava-button,
  .rava-system-menu > li > a,
  .rava-system-menu > li > a::after,
  .p21-discovery-directions > a,
  .p21-discovery-directions__arrow,
  .p21-coffee-card,
  .p21-coffee-card__media img,
  .p21-builder-row,
  .p21-builder-row__arrow,
  .rava-mobile-nav-item,
  .rava-action-snackbar { transition-duration: .01ms !important; transform: none !important; }
  .rava-action-snackbar__progress { animation: none; transform: scaleX(1); }
}

/* UIUX-03 — compact account switcher + mobile layout repair. */

/* Desktop navigation: active state is typographic and precise, never a filled pill. */
.rava-system-menu > li > a {
  position: relative;
  border-radius: 0;
  background: transparent !important;
  padding-inline: .5rem;
  transition:
    color var(--rava-motion-normal) var(--rava-ease-standard),
    transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-system-menu > li > a:is(:hover,:focus-visible) {
  background: transparent !important;
  color: var(--rava-color-accent);
  transform: translateY(-1px);
}
.rava-system-menu > li > a[aria-current="page"] {
  background: transparent !important;
  color: var(--rava-color-accent);
  font-weight: 600;
}
.rava-system-menu > li > a[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: .28rem;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 999px;
  background: var(--rava-color-accent);
  transform: translateX(-50%);
  opacity: .9;
}
.rava-system-menu > li > a:not([aria-current="page"])::before { content: none; }

/* The old professional shortcut is retired everywhere. */
.rava-workspace-entry { display: none !important; }

/* A lightweight dropdown replaces the full-screen environment chooser. */
.rava-account-menu {
  position: fixed;
  z-index: 10040;
  width: min(248px, calc(100vw - 24px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.985);
  transform-origin: top center;
  transition:
    opacity var(--rava-motion-normal) var(--rava-ease-standard),
    transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-account-menu[hidden] { display: none !important; }
.rava-account-menu.is-mobile-anchor {
  transform: translateY(6px) scale(.985);
  transform-origin: bottom center;
}
.rava-account-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.rava-account-menu__surface {
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 13%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--rava-color-surface) 96%, transparent);
  box-shadow: 0 14px 36px rgb(23 26 23 / 12%);
  backdrop-filter: blur(18px) saturate(115%);
}
.rava-account-menu__item {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: .72rem;
  padding: .55rem .7rem;
  border: 0;
  border-radius: 9px;
  color: var(--rava-color-text);
  background: transparent;
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none !important;
  transition:
    background var(--rava-motion-normal) var(--rava-ease-standard),
    color var(--rava-motion-normal) var(--rava-ease-standard),
    transform var(--rava-motion-normal) var(--rava-ease-standard);
}
.rava-account-menu__item .rava-svg-icon {
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 20px;
  color: var(--rava-color-accent);
}
.rava-account-menu__item:is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--rava-color-accent) 7%, var(--rava-color-surface));
  color: var(--rava-color-accent);
  transform: translateY(-1px);
}
.rava-account-menu__item:focus-visible {
  outline: 2px solid var(--rava-color-accent);
  outline-offset: 1px;
}

/* Mobile Discover repair: the opening composition is explicitly one column.
   Flex here intentionally wins over older grid fidelity layers. */
@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero__grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 14px !important;
  }
  body.rava-native-public-discover .p21-hero__copy {
    width: 100%;
    min-width: 0;
    align-self: stretch !important;
  }
  body.rava-native-public-discover .p21-hero h1 {
    width: 100%;
    max-width: none !important;
    margin: 0;
    font-size: clamp(1.9rem, 8.5vw, 2.4rem);
    line-height: 1.12;
    text-wrap: balance;
  }
  body.rava-native-public-discover .p21-discovery-directions {
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    margin-block-start: 14px;
  }
  body.rava-native-public-discover .p21-discovery-directions > a {
    min-width: 0;
    min-height: 82px;
    padding: .72rem .76rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .28rem .55rem;
  }
  body.rava-native-public-discover .p21-discovery-directions > a .p2-kicker {
    min-width: 0;
    white-space: nowrap;
    font-size: .58rem;
    letter-spacing: .08em;
  }
  body.rava-native-public-discover .p21-discovery-directions > a strong {
    min-width: 0;
    max-width: none;
    font-size: .7rem;
    line-height: 1.62;
    overflow-wrap: break-word;
    word-break: normal;
  }
  body.rava-native-public-discover .p21-specimen {
    order: 2;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    min-height: 118px;
  }
  body.rava-native-public-discover .p21-specimen__media {
    min-width: 0;
    min-height: 118px;
    aspect-ratio: auto !important;
  }
  body.rava-native-public-discover .p21-specimen__caption {
    min-width: 0;
    padding: .72rem .8rem;
    align-self: center;
  }
  body.rava-native-public-discover .p21-specimen__caption .p2-kicker {
    white-space: nowrap;
    font-size: .58rem;
    letter-spacing: .08em;
  }
  body.rava-native-public-discover .p21-specimen__caption h2 {
    margin-block: .2rem .12rem;
    font-size: 1rem;
  }
  body.rava-native-public-discover .p21-specimen__caption p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .rava-account-menu {
    width: min(236px, calc(100vw - 24px));
  }
  .rava-account-menu__surface {
    border-radius: 16px;
    box-shadow: 0 12px 32px rgb(23 26 23 / 13%);
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero h1 {
    font-size: clamp(1.82rem, 8.2vw, 2.18rem);
  }
  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: 78px;
    padding: .64rem .66rem;
  }
  body.rava-native-public-discover .p21-specimen {
    grid-template-columns: 94px minmax(0, 1fr) !important;
    min-height: 112px;
  }
  body.rava-native-public-discover .p21-specimen__media { min-height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .rava-account-menu,
  .rava-account-menu__item,
  .rava-system-menu > li > a { transition: none !important; }
}


/* UIUX-04 — mobile opening composition + unified account label. */
@media (max-width: 900px) {
  /* The mobile masthead is a deliberate two-line editorial lockup, never a clipped desktop headline. */
  body.rava-native-public-discover .p21-hero {
    padding-block: 14px 20px;
    overflow: visible;
  }
  body.rava-native-public-discover .p21-hero__copy {
    overflow: visible;
  }
  body.rava-native-public-discover .p21-hero h1 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 1px;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: right;
    white-space: normal !important;
    overflow: visible !important;
    text-wrap: wrap;
  }
  body.rava-native-public-discover .p21-hero__title-line {
    display: block !important;
    min-width: 0;
    max-width: 100%;
    white-space: normal !important;
    overflow: visible;
  }
  body.rava-native-public-discover .p21-hero__title-line:not(.p21-hero__title-line--accent) {
    color: var(--rava-color-text-muted);
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0;
  }
  body.rava-native-public-discover .p21-hero__title-line--accent {
    color: var(--rava-color-accent);
    font-size: clamp(1.9rem, 8.2vw, 2.45rem);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -.025em;
  }

  /* Featured coffee is one compact horizontal record: media on the right, identity on the left. */
  body.rava-native-public-discover .p21-specimen {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 12px;
    transform: none !important;
  }
  body.rava-native-public-discover .p21-specimen__media {
    position: relative;
    flex: 0 0 124px !important;
    width: 124px !important;
    min-width: 124px !important;
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
    aspect-ratio: auto !important;
    overflow: hidden;
    align-self: stretch;
  }
  body.rava-native-public-discover .p21-specimen__media img,
  body.rava-native-public-discover .p21-specimen__media .p21-archive-plate {
    width: 100% !important;
    height: 100% !important;
    max-height: 136px !important;
    object-fit: contain !important;
  }
  body.rava-native-public-discover .p21-specimen__media::before {
    inset: .5rem;
  }
  body.rava-native-public-discover .p21-specimen__index {
    inset-inline-start: .55rem;
    inset-block-end: .55rem;
    padding: .28rem .42rem;
    font-size: .54rem;
  }
  body.rava-native-public-discover .p21-specimen__caption {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 136px;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: .8rem .9rem !important;
    text-align: right;
  }
  body.rava-native-public-discover .p21-specimen__caption .p2-kicker {
    max-width: 100%;
    white-space: normal !important;
    font-size: .56rem;
    line-height: 1.6;
    letter-spacing: .055em;
  }
  body.rava-native-public-discover .p21-specimen__caption h2 {
    width: 100%;
    margin: .18rem 0 .08rem !important;
    font-size: 1.04rem !important;
    line-height: 1.45;
    text-align: right;
  }
  body.rava-native-public-discover .p21-specimen__caption p {
    width: 100%;
    margin: 0;
    color: var(--rava-color-text-muted);
    font-size: .72rem;
    line-height: 1.65;
    text-align: right;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  body.rava-native-public-discover .p21-specimen__facts { display: none !important; }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__title-line--accent {
    font-size: clamp(1.78rem, 8vw, 2.12rem);
  }
  body.rava-native-public-discover .p21-specimen__media {
    flex-basis: 112px !important;
    width: 112px !important;
    min-width: 112px !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
  }
  body.rava-native-public-discover .p21-specimen__media img,
  body.rava-native-public-discover .p21-specimen__media .p21-archive-plate {
    max-height: 128px !important;
  }
  body.rava-native-public-discover .p21-specimen__caption {
    min-height: 128px;
    padding: .7rem .75rem !important;
  }
}

/* UIUX-05 — quiet identity divider + fixed beginner discovery routes. */
body.rava-native-public-discover .p21-hero__identity-divider {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: var(--rava-color-accent);
  font-size: .78rem !important;
  font-weight: 600;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: center;
  white-space: nowrap;
  overflow: visible !important;
}
body.rava-native-public-discover .p21-hero__identity-divider::before,
body.rava-native-public-discover .p21-hero__identity-divider::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: color-mix(in srgb, var(--rava-color-text) 18%, transparent);
}
body.rava-native-public-discover .p21-hero__identity-divider > span {
  flex: 0 0 auto;
}
body.rava-native-public-discover .p21-discovery-directions {
  margin-block-start: 0 !important;
}
body.rava-native-public-discover .p21-discovery-directions > a {
  min-height: 108px;
}
body.rava-native-public-discover .p21-discovery-directions__label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .18rem .42rem;
  min-width: 0;
  color: var(--rava-color-accent);
  white-space: normal;
  line-height: 1.45;
}
body.rava-native-public-discover .p21-discovery-directions__label > span {
  min-width: 0;
}
body.rava-native-public-discover .p21-discovery-directions__label > span[lang="en"] {
  font-size: .92em;
  letter-spacing: .045em;
}
body.rava-native-public-discover .p21-discovery-directions__slash {
  color: var(--rava-color-text-muted);
  font-weight: 400;
}
body.rava-native-public-discover .p21-discovery-directions > a strong {
  max-width: 34ch;
}

@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero__identity-divider {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    font-size: .72rem !important;
    line-height: 1.5 !important;
    font-weight: 600;
    text-align: center !important;
    white-space: nowrap !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider::before,
  body.rava-native-public-discover .p21-hero__identity-divider::after {
    min-width: 20px;
  }
  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: 108px;
    padding: .72rem .74rem;
  }
  body.rava-native-public-discover .p21-discovery-directions__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    font-size: .58rem;
    line-height: 1.5;
  }
  body.rava-native-public-discover .p21-discovery-directions__slash {
    display: none;
  }
  body.rava-native-public-discover .p21-discovery-directions__label > span[lang="en"] {
    font-size: .88em;
    letter-spacing: .055em;
  }
  body.rava-native-public-discover .p21-discovery-directions > a strong {
    font-size: .69rem;
    line-height: 1.62;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__identity-divider {
    font-size: .68rem !important;
    gap: 8px !important;
  }
  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: 112px;
    padding: .66rem .64rem;
  }
  body.rava-native-public-discover .p21-discovery-directions > a strong {
    font-size: .66rem;
  }
}


/* UIUX-06 — raised mobile identity divider + simplified espresso discovery labels. */
@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero {
    padding-block-start: 8px;
  }
  body.rava-native-public-discover .p21-hero__identity-divider {
    position: relative;
    z-index: 1;
    width: 100% !important;
    margin: 0 0 14px !important;
    gap: 10px !important;
    font-size: .7rem !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider::before,
  body.rava-native-public-discover .p21-hero__identity-divider::after {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
  }
  body.rava-native-public-discover .p21-discovery-directions {
    margin-block-start: 0 !important;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__identity-divider {
    gap: 8px !important;
    font-size: .66rem !important;
  }
}

/* UIUX-07 — mobile identity divider geometry correction. */
@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero {
    padding-block-start: 0 !important;
  }
  body.rava-native-public-discover .p21-hero__grid {
    padding-block: 16px 24px !important;
    gap: 16px !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 28px !important;
    padding: 0 !important;
    font-size: .68rem !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider::before,
  body.rava-native-public-discover .p21-hero__identity-divider::after {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 1px !important;
    align-self: center !important;
    background: color-mix(in srgb, var(--rava-color-text) 18%, transparent) !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider::before {
    grid-column: 1 !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider > span {
    grid-column: 2 !important;
    justify-self: center;
  }
  body.rava-native-public-discover .p21-hero__identity-divider::after {
    grid-column: 3 !important;
  }
  body.rava-native-public-discover .p21-discovery-directions {
    margin-block-start: 0 !important;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__grid {
    padding-block-start: 14px !important;
  }
  body.rava-native-public-discover .p21-hero__identity-divider {
    column-gap: 9px !important;
    margin-block-end: 26px !important;
    font-size: .64rem !important;
  }
}

/* UIUX-08 — mobile discovery breathing room, interaction polish, and staged entrance. */
@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero {
    min-height: 75svh;
    padding: 0 !important;
    overflow: visible;
  }

  body.rava-native-public-discover .p21-hero__grid {
    min-height: 75svh;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between;
    gap: clamp(30px, 4.6svh, 44px) !important;
    padding-block: clamp(28px, 4svh, 40px) 0 !important;
  }

  /* A zero-height third flex item makes the boxes→featured and featured→next-section
     breathing spaces track each other instead of collecting as dead space below the card. */
  body.rava-native-public-discover .p21-hero__grid::after {
    content: "";
    display: block;
    flex: 0 0 0;
    block-size: 0;
    min-block-size: 0;
  }

  body.rava-native-public-discover .p21-hero__copy {
    width: 100%;
    min-width: 0;
  }

  body.rava-native-public-discover .p21-hero__identity-divider {
    margin: 0 0 clamp(30px, 4.2svh, 40px) !important;
    column-gap: 12px !important;
    font-size: .68rem !important;
  }

  body.rava-native-public-discover .p21-hero__identity-divider::before,
  body.rava-native-public-discover .p21-hero__identity-divider::after {
    background: color-mix(in srgb, var(--rava-color-text) 16%, transparent) !important;
  }

  body.rava-native-public-discover .p21-discovery-directions {
    gap: 12px !important;
    margin: 0 !important;
  }

  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: clamp(118px, 14svh, 136px) !important;
    padding: .9rem .86rem !important;
    border: 1px solid color-mix(in srgb, var(--rava-color-text) 11%, transparent) !important;
    border-radius: 14px;
    background: color-mix(in srgb, var(--rava-color-surface) 94%, var(--rava-color-canvas));
    transition:
      background 180ms var(--rava-ease-standard),
      border-color 180ms var(--rava-ease-standard),
      color 180ms var(--rava-ease-standard),
      transform 180ms var(--rava-ease-standard);
  }

  body.rava-native-public-discover .p21-discovery-directions > a:is(:hover,:focus-visible,:active) {
    background: color-mix(in srgb, var(--rava-color-accent) 6%, var(--rava-color-surface));
    border-color: color-mix(in srgb, var(--rava-color-accent) 34%, transparent) !important;
    color: var(--rava-color-accent);
    transform: translateY(-2px);
  }

  body.rava-native-public-discover .p21-discovery-directions > a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--rava-color-accent) 55%, transparent);
    outline-offset: 2px;
  }

  body.rava-native-public-discover .p21-discovery-directions__label {
    font-size: .62rem;
    line-height: 1.55;
  }

  body.rava-native-public-discover .p21-discovery-directions > a strong {
    font-size: .72rem;
    line-height: 1.68;
  }

  body.rava-native-public-discover .p21-discovery-directions__arrow {
    align-self: end;
    justify-self: start;
    font-size: 1rem;
    transition: transform 180ms var(--rava-ease-standard), color 180ms var(--rava-ease-standard);
  }

  body.rava-native-public-discover .p21-discovery-directions > a:is(:hover,:focus-visible,:active) .p21-discovery-directions__arrow {
    transform: translateX(-4px);
  }

  body.rava-native-public-discover .p21-specimen {
    position: relative;
    min-height: 144px !important;
    border: 1px solid color-mix(in srgb, var(--rava-color-text) 11%, transparent);
    border-radius: 14px !important;
    background: var(--rava-color-surface);
    overflow: hidden !important;
    transition:
      background 190ms var(--rava-ease-standard),
      border-color 190ms var(--rava-ease-standard),
      transform 190ms var(--rava-ease-standard);
  }

  /* Extend the existing media link over the complete featured record without changing markup. */
  body.rava-native-public-discover .p21-specimen__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 6;
  }

  body.rava-native-public-discover .p21-specimen:is(:hover,:focus-within,:active) {
    background: color-mix(in srgb, var(--rava-color-accent) 3.5%, var(--rava-color-surface));
    border-color: color-mix(in srgb, var(--rava-color-accent) 30%, transparent);
    transform: translateY(-2px) !important;
  }

  body.rava-native-public-discover .p21-specimen__media {
    flex-basis: 128px !important;
    width: 128px !important;
    min-width: 128px !important;
    height: 144px !important;
    min-height: 144px !important;
    max-height: 144px !important;
  }

  body.rava-native-public-discover .p21-specimen__media img,
  body.rava-native-public-discover .p21-specimen__media .p21-archive-plate {
    max-height: 144px !important;
    transition: transform 190ms var(--rava-ease-standard);
  }

  body.rava-native-public-discover .p21-specimen:is(:hover,:focus-within,:active) .p21-specimen__media img,
  body.rava-native-public-discover .p21-specimen:is(:hover,:focus-within,:active) .p21-specimen__media .p21-archive-plate {
    transform: translateY(-2px) scale(1.012);
  }

  body.rava-native-public-discover .p21-specimen__caption {
    min-height: 144px;
    padding: .9rem 1rem !important;
  }

  /* The hero already owns the matching trailing gap, so records begin immediately after it. */
  body.rava-native-public-discover .p21-section--records {
    padding-block-start: 0 !important;
  }

  /* Mobile footer mirrors the opening identity motif without repeating the descriptor. */
  body.rava-shell-context-public .rava-institutional-footer .rava-footer-statement {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    width: 100%;
    max-width: none;
    color: color-mix(in srgb, var(--rava-color-surface) 82%, transparent);
    font-size: .72rem;
    text-align: center;
    white-space: nowrap;
  }

  body.rava-shell-context-public .rava-institutional-footer .rava-footer-statement::before,
  body.rava-shell-context-public .rava-institutional-footer .rava-footer-statement::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: color-mix(in srgb, var(--rava-color-surface) 22%, transparent);
  }

  body.rava-shell-context-public .rava-institutional-footer .rava-footer-primary {
    gap: 1rem;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__grid {
    gap: clamp(28px, 4.2svh, 38px) !important;
    padding-block-start: clamp(24px, 3.5svh, 34px) !important;
  }

  body.rava-native-public-discover .p21-hero__identity-divider {
    margin-block-end: clamp(28px, 3.9svh, 36px) !important;
    font-size: .64rem !important;
  }

  body.rava-native-public-discover .p21-discovery-directions {
    gap: 10px !important;
  }

  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: clamp(114px, 13.6svh, 128px) !important;
    padding: .8rem .72rem !important;
    border-radius: 13px;
  }

  body.rava-native-public-discover .p21-specimen,
  body.rava-native-public-discover .p21-specimen__caption {
    min-height: 136px !important;
  }

  body.rava-native-public-discover .p21-specimen__media {
    flex-basis: 118px !important;
    width: 118px !important;
    min-width: 118px !important;
    height: 136px !important;
    min-height: 136px !important;
    max-height: 136px !important;
  }

  body.rava-native-public-discover .p21-specimen__media img,
  body.rava-native-public-discover .p21-specimen__media .p21-archive-plate {
    max-height: 136px !important;
  }

  body.rava-shell-context-public .rava-institutional-footer .rava-footer-statement {
    column-gap: 9px;
    font-size: .68rem;
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  @keyframes rava-uiux08-mobile-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  body.rava-native-public-discover .p21-hero__identity-divider,
  body.rava-native-public-discover .p21-discovery-directions > a,
  body.rava-native-public-discover .p21-specimen {
    animation: rava-uiux08-mobile-enter 190ms var(--rava-ease-standard) both;
  }

  body.rava-native-public-discover .p21-hero__identity-divider { animation-delay: 20ms; }
  body.rava-native-public-discover .p21-discovery-directions > a:nth-child(1) { animation-delay: 70ms; }
  body.rava-native-public-discover .p21-discovery-directions > a:nth-child(2) { animation-delay: 110ms; }
  body.rava-native-public-discover .p21-discovery-directions > a:nth-child(3) { animation-delay: 150ms; }
  body.rava-native-public-discover .p21-discovery-directions > a:nth-child(4) { animation-delay: 190ms; }
  body.rava-native-public-discover .p21-specimen { animation-delay: 250ms; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  body.rava-native-public-discover .p21-hero__identity-divider,
  body.rava-native-public-discover .p21-discovery-directions > a,
  body.rava-native-public-discover .p21-specimen,
  body.rava-native-public-discover .p21-specimen__media img,
  body.rava-native-public-discover .p21-specimen__media .p21-archive-plate {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* UIUX-09 — restore editorial discovery grid and center key mobile moments in their whitespace. */
@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero {
    min-height: 75svh;
    padding: 0 !important;
  }

  body.rava-native-public-discover .p21-hero__grid {
    min-height: 75svh;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding-block: 0 !important;
  }

  /* Let the descriptor and discovery grid participate as separate pieces in the mobile composition. */
  body.rava-native-public-discover .p21-hero__copy {
    display: contents !important;
  }

  /* The descriptor owns a calm top field and sits in its optical center. */
  body.rava-native-public-discover .p21-hero__identity-divider {
    order: 1;
    min-height: clamp(154px, 22svh, 210px);
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    width: 100% !important;
    font-size: .68rem !important;
  }

  /* Bring back the original archive-like grid: square cells, hairline separators, no card gaps. */
  body.rava-native-public-discover .p21-discovery-directions {
    order: 2;
    width: 100%;
    margin: 0 !important;
    gap: 1px !important;
    border-block: 1px solid color-mix(in srgb, var(--rava-color-text) 12%, transparent) !important;
    border-radius: 0 !important;
    background: color-mix(in srgb, var(--rava-color-text) 10%, transparent) !important;
  }

  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: 108px !important;
    padding: .78rem .8rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--rava-color-canvas) !important;
    box-shadow: none !important;
    transform: none !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "kicker kicker"
      "copy arrow" !important;
    gap: .3rem .55rem !important;
    transition:
      background 180ms var(--rava-ease-standard),
      color 180ms var(--rava-ease-standard) !important;
  }

  body.rava-native-public-discover .p21-discovery-directions > a:is(:hover,:focus-visible,:active) {
    background: var(--rava-color-surface) !important;
    border-color: transparent !important;
    color: var(--rava-color-accent);
    transform: none !important;
  }

  body.rava-native-public-discover .p21-discovery-directions__arrow {
    grid-area: arrow !important;
    align-self: center !important;
    justify-self: start !important;
    margin: 0 !important;
    font-size: .98rem;
  }

  body.rava-native-public-discover .p21-discovery-directions > a:is(:hover,:focus-visible,:active) .p21-discovery-directions__arrow {
    transform: translateX(-3px);
  }

  /* The featured record floats in the middle of its own breathing field. */
  body.rava-native-public-discover .p21-specimen {
    order: 3;
    margin-block: clamp(54px, 7.5svh, 82px) !important;
  }

  body.rava-native-public-discover .p21-section--records {
    padding-block-start: 0 !important;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__identity-divider {
    min-height: clamp(144px, 21svh, 190px);
    column-gap: 9px !important;
    font-size: .64rem !important;
  }

  body.rava-native-public-discover .p21-discovery-directions > a {
    min-height: 104px !important;
    padding: .72rem .68rem !important;
  }

  body.rava-native-public-discover .p21-specimen {
    margin-block: clamp(48px, 7svh, 72px) !important;
  }
}


/* UIUX-10 — retire the 75svh opening rule and halve the mobile descriptor field. */
@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero,
  body.rava-native-public-discover .p21-hero__grid {
    min-height: auto !important;
  }

  body.rava-native-public-discover .p21-hero__identity-divider {
    min-height: clamp(77px, 11svh, 105px) !important;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-hero__identity-divider {
    min-height: clamp(72px, 10.5svh, 95px) !important;
  }
}

/* UIUX-11 — Archive discovery refinement. Brand Manual v1 remains final authority. */
body.rava-native-public-archive .p21-archive-hero {
  padding-block: clamp(32px, 4vw, 52px);
  border-block-end: 1px solid color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  background: var(--rava-color-canvas);
}
body.rava-native-public-archive .p21-archive-hero__minimal {
  display: grid;
  gap: 16px;
}
body.rava-native-public-archive .p21-archive-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  direction: ltr;
}
body.rava-native-public-archive .p21-archive-identity > h1 {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  margin: 0;
  color: var(--rava-color-text);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.4;
  direction: rtl;
  text-align: right;
}
body.rava-native-public-archive .p21-archive-identity > span {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  color: var(--rava-color-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}
body.rava-native-public-archive .p21-archive-count {
  display: inline-flex;
  align-items: baseline;
  justify-self: end;
  gap: 8px;
  margin: 0;
  color: var(--rava-color-text-muted);
}
body.rava-native-public-archive .p21-archive-count strong {
  color: var(--rava-color-text);
  font-size: 22px;
  font-weight: 600;
}
body.rava-native-public-archive .p21-archive-count span { font-size: 14px; }

body.rava-native-public-archive .p21-archive-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-block: 24px 0;
  border-block: 1px solid color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  background: color-mix(in srgb, var(--rava-color-text) 10%, transparent);
}
body.rava-native-public-archive .p21-archive-quick > a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "kicker arrow"
    "title arrow"
    "copy arrow";
  gap: 4px 12px;
  min-height: 118px;
  padding: 16px;
  background: var(--rava-color-canvas);
  color: var(--rava-color-text);
  text-decoration: none;
  transition: background 180ms var(--rava-ease-standard), color 180ms var(--rava-ease-standard);
}
body.rava-native-public-archive .p21-archive-quick > a .p2-kicker { grid-area: kicker; }
body.rava-native-public-archive .p21-archive-quick > a strong { grid-area: title; font-size: 16px; font-weight: 600; }
body.rava-native-public-archive .p21-archive-quick > a small { grid-area: copy; color: var(--rava-color-text-muted); font-size: 12px; line-height: 1.7; }
body.rava-native-public-archive .p21-archive-quick__arrow {
  grid-area: arrow;
  align-self: center;
  color: var(--rava-color-accent);
  transition: transform 180ms var(--rava-ease-standard);
}
body.rava-native-public-archive .p21-archive-quick > a:is(:hover,:focus-visible),
body.rava-native-public-archive .p21-archive-quick > a[aria-pressed="true"] {
  background: var(--rava-color-surface);
  color: var(--rava-color-accent);
}
body.rava-native-public-archive .p21-archive-quick > a[aria-pressed="true"]::after {
  content: "فعال";
  position: absolute;
  inset-inline-end: 16px;
  inset-block-start: 14px;
  color: var(--rava-color-accent);
  font-size: 10px;
  font-weight: 600;
}
body.rava-native-public-archive .p21-archive-quick > a:is(:hover,:focus-visible) .p21-archive-quick__arrow { transform: translateX(-3px); }
body.rava-native-public-archive .p21-archive-quick > a:focus-visible {
  z-index: 1;
  outline: 2px solid var(--rava-color-text);
  outline-offset: 3px;
}

body.rava-native-public-archive .p21-archive-command {
  margin-block-start: 24px;
  padding-block: 0;
  border: 0;
  background: transparent;
}
body.rava-native-public-archive .p21-archive-command__inner {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 16px;
  align-items: center;
}
body.rava-native-public-archive .p21-archive-search {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  min-height: 54px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 18%, transparent);
  border-radius: 12px;
  background: var(--rava-color-surface);
  transition: border-color 180ms var(--rava-ease-standard), box-shadow 180ms var(--rava-ease-standard);
}
body.rava-native-public-archive .p21-archive-search:focus-within {
  border-color: var(--rava-color-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rava-color-text) 14%, transparent);
}
body.rava-native-public-archive .p21-archive-search > svg {
  grid-column: 1;
  inline-size: 20px;
  justify-self: center;
  color: var(--rava-color-text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
body.rava-native-public-archive .p21-archive-search > input {
  grid-column: 2;
  min-width: 0;
  min-height: 52px;
  padding: 0 4px;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px;
}
body.rava-native-public-archive .p21-archive-search > input::-webkit-search-cancel-button { display: none; }
body.rava-native-public-archive .p21-archive-search__clear {
  grid-column: 3;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  justify-self: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rava-color-text) 7%, transparent);
  color: var(--rava-color-text-muted);
  font-size: 20px;
  cursor: pointer;
}
body.rava-native-public-archive .p21-archive-search__clear[hidden] { display: none; }
body.rava-native-public-archive .p21-archive-search__clear:focus-visible {
  outline: 2px solid var(--rava-color-text);
  outline-offset: 2px;
}
body.rava-native-public-archive .p21-archive-search .rava-live-search__results {
  inset-inline: 0;
  inset-block-start: calc(100% + 8px);
  border-radius: 10px;
}
body.rava-native-public-archive .p21-archive-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
body.rava-native-public-archive .p21-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--rava-color-text-muted);
  font-size: 12px;
}
body.rava-native-public-archive .p21-sort__control {
  position: relative;
  display: inline-grid;
  grid-template-columns: minmax(140px, auto) 28px;
  align-items: center;
  min-height: 48px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 14%, transparent);
  border-radius: 10px;
  background: var(--rava-color-surface);
}
body.rava-native-public-archive .p21-sort__control select {
  grid-column: 1 / -1;
  grid-row: 1;
  min-width: 180px;
  min-height: 48px;
  padding: 0 14px 0 38px;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: var(--rava-color-text);
  font: 500 13px/1.5 var(--rava-font-ui);
  cursor: pointer;
}
body.rava-native-public-archive .p21-sort__control svg {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  inline-size: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  pointer-events: none;
}
body.rava-native-public-archive .p21-sort__control:focus-within {
  border-color: var(--rava-color-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rava-color-text) 12%, transparent);
}
body.rava-native-public-archive .p21-view-switch { min-height: 48px; }
body.rava-native-public-archive .p21-view-switch a { min-width: 48px; min-height: 48px; }
body.rava-native-public-archive .p21-filter-trigger { display: none; }

body.rava-native-public-archive .p21-archive-layout {
  grid-template-columns: minmax(230px, 260px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  padding-block: 28px 72px;
}
body.rava-native-public-archive .p21-filter-panel {
  border-color: color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  background: var(--rava-color-surface);
}
body.rava-native-public-archive .p21-type-switch,
body.rava-native-public-archive .p21-specialty-toggle { display: none; }
body.rava-native-public-archive .p21-filter-group[hidden] { display: none !important; }
body.rava-native-public-archive .p21-origin-search {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  margin: 0 12px 8px;
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 12%, transparent);
  border-radius: 8px;
  background: var(--rava-color-canvas);
}
body.rava-native-public-archive .p21-origin-search:focus-within { border-color: var(--rava-color-text); }
body.rava-native-public-archive .p21-origin-search svg {
  inline-size: 16px;
  justify-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  color: var(--rava-color-text-muted);
}
body.rava-native-public-archive .p21-origin-search input {
  min-width: 0;
  min-height: 44px;
  padding: 0 4px 0 10px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
}
body.rava-native-public-archive [data-rava-origin-options] { max-height: 22rem; }
body.rava-native-public-archive [data-rava-origin-option][hidden] { display: none; }
body.rava-native-public-archive .p21-origin-option { display: grid; gap: 1px; min-width: 0; }
body.rava-native-public-archive .p21-origin-option strong { font-size: 12px; font-weight: 500; }
body.rava-native-public-archive .p21-origin-option small {
  overflow: hidden;
  color: var(--rava-color-text-muted);
  font-size: 10px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.rava-native-public-archive .p21-origin-empty { margin: 8px 0; color: var(--rava-color-text-muted); font-size: 12px; }
body.rava-native-public-archive .p21-filter-actions [data-rava-filter-apply] { display: none; }
body.rava-native-public-archive .p21-filter-actions { position: static; }

body.rava-native-public-archive .p21-archive-content .p2-coffee-grid--grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__media {
  block-size: clamp(168px, 15vw, 205px);
}
body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__body { padding: 14px 14px 16px; }
body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__body > h3 { font-size: 16px; }
body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__identity { font-size: 12px; }
body.rava-native-public-archive .p21-archive-content .p2-archive-result-header {
  min-height: 0;
  margin-block-end: 16px;
  padding-block-end: 12px;
}
body.rava-native-public-archive .p21-load-more {
  display: grid;
  place-items: center;
  margin-block-start: 32px;
}
body.rava-native-public-archive .p21-load-more__button {
  display: grid !important;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 260px) !important;
  min-height: 52px !important;
  padding: 8px 16px !important;
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 18%, transparent) !important;
  border-radius: 10px !important;
  background: var(--rava-color-surface) !important;
  color: var(--rava-color-text) !important;
  text-decoration: none !important;
  transition: border-color 180ms var(--rava-ease-standard), background 180ms var(--rava-ease-standard), transform 180ms var(--rava-ease-standard);
}
body.rava-native-public-archive .p21-load-more__button span:first-child { font-size: 13px; font-weight: 600; }
body.rava-native-public-archive .p21-load-more__button small { color: var(--rava-color-text-muted); font-size: 10px; }
body.rava-native-public-archive .p21-load-more__button:is(:hover,:focus-visible) {
  border-color: var(--rava-color-text) !important;
  background: var(--rava-color-canvas) !important;
  transform: translateY(-1px);
}
body.rava-native-public-archive .p21-load-more__button[aria-busy="true"] { opacity: .58; pointer-events: none; }

@media (max-width: 1180px) and (min-width: 901px) {
  body.rava-native-public-archive .p21-archive-content .p2-coffee-grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body.rava-native-public-archive .p21-archive-hero { padding-block: 24px; }
  body.rava-native-public-archive .p21-archive-hero__minimal { gap: 12px; }
  body.rava-native-public-archive .p21-archive-identity { gap: 16px; }
  body.rava-native-public-archive .p21-archive-identity > h1 { font-size: 28px; }
  body.rava-native-public-archive .p21-archive-identity > span { font-size: 10px; letter-spacing: .08em; }
  body.rava-native-public-archive .p21-archive-count strong { font-size: 18px; }
  body.rava-native-public-archive .p21-archive-quick { display: none; }

  body.rava-native-public-archive .p21-archive-command {
    margin-block-start: 16px;
    padding-block: 0 16px;
    border-block-end: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent);
  }
  body.rava-native-public-archive .p21-archive-command__inner {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  body.rava-native-public-archive .p21-archive-search {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    min-height: 52px;
    border-radius: 12px;
  }
  body.rava-native-public-archive .p21-archive-search > input { min-height: 50px; }
  body.rava-native-public-archive .p21-archive-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    direction: rtl;
  }
  body.rava-native-public-archive .p21-filter-trigger {
    grid-column: 1;
    display: inline-flex;
    justify-content: center;
    min-width: 0;
    width: 100%;
    min-height: 48px;
    margin: 0;
  }
  body.rava-native-public-archive .p21-sort {
    grid-column: 2;
    display: block;
    min-width: 0;
  }
  body.rava-native-public-archive .p21-sort > span:first-child { display: none; }
  body.rava-native-public-archive .p21-sort__control {
    display: grid;
    width: 100%;
    min-width: 0;
  }
  body.rava-native-public-archive .p21-sort__control select { min-width: 0; width: 100%; min-height: 48px; }
  body.rava-native-public-archive .p21-view-switch { display: none; }

  body.rava-native-public-archive .p21-archive-layout {
    display: block;
    padding-block: 20px 56px;
  }
  body.rava-native-public-archive .p21-filter-panel {
    position: fixed !important;
    z-index: 1001;
    inset: auto 0 0 0 !important;
    width: 100% !important;
    max-width: none;
    max-height: min(88dvh, 760px) !important;
    padding: 0 !important;
    overflow: auto;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(102%) !important;
    border: 0 !important;
    border-block-start: 1px solid color-mix(in srgb, var(--rava-color-text) 14%, transparent) !important;
    border-radius: 16px 16px 0 0 !important;
    background: var(--rava-color-surface) !important;
    box-shadow: 0 -16px 44px rgb(23 26 23 / 12%);
    transition: transform 180ms var(--rava-ease-standard), visibility 0s linear 180ms !important;
  }
  body.rava-native-public-archive .p21-filter-panel.open {
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) !important;
    transition-delay: 0s !important;
  }
  body.rava-native-public-archive .p21-filter-panel__head {
    position: sticky;
    z-index: 2;
    inset-block-start: 0;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    border-block-end: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent);
    background: var(--rava-color-surface);
  }
  body.rava-native-public-archive .p21-filter-form { padding-block-end: calc(82px + var(--rava-safe-bottom, 0px)); }
  body.rava-native-public-archive .p21-type-switch,
  body.rava-native-public-archive .p21-specialty-toggle { display: block; }
  body.rava-native-public-archive .p21-type-switch { padding: 16px !important; }
  body.rava-native-public-archive .p21-type-switch > div { margin-block-start: 10px; }
  body.rava-native-public-archive .p21-specialty-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 16px;
    border-block-start: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent);
  }
  body.rava-native-public-archive .p21-specialty-toggle input { inline-size: 20px; block-size: 20px; accent-color: var(--rava-color-accent); }
  body.rava-native-public-archive .p21-specialty-toggle span { display: grid; gap: 2px; }
  body.rava-native-public-archive .p21-specialty-toggle strong { font-size: 14px; font-weight: 600; }
  body.rava-native-public-archive .p21-specialty-toggle small { color: var(--rava-color-text-muted); font-size: 11px; }
  body.rava-native-public-archive .p21-filter-group summary { min-height: 56px; padding-inline: 16px; }
  body.rava-native-public-archive .p21-filter-group .p2-filter-options { max-height: none; padding-inline: 16px; }
  body.rava-native-public-archive .p21-filter-group .p2-filter-options label { min-height: 48px; }
  body.rava-native-public-archive .p21-origin-search { margin-inline: 16px; }
  body.rava-native-public-archive [data-rava-origin-options] { max-height: min(42dvh, 420px); }
  body.rava-native-public-archive .p21-stock-toggle { min-height: 60px; padding-inline: 16px; }
  body.rava-native-public-archive .p21-filter-actions {
    position: sticky;
    z-index: 3;
    inset-block-end: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px 16px calc(12px + var(--rava-safe-bottom, 0px));
    border-block-start: 1px solid color-mix(in srgb, var(--rava-color-text) 14%, transparent);
    background: var(--rava-color-surface);
  }
  body.rava-native-public-archive .p21-filter-actions [data-rava-filter-apply] {
    display: inline-flex;
    min-height: 52px;
    width: 100%;
  }
  body.rava-native-public-archive .p21-filter-actions > a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
  body.rava-filter-open .rava-mobile-bottom-nav,
  body.rava-filter-open [data-rava-mobile-bottom-nav] {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.rava-native-public-archive .p21-active-filter-region .p2-active-filters {
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    margin-inline: -16px;
    padding-inline: 16px;
    scrollbar-width: none;
  }
  body.rava-native-public-archive .p21-active-filter-region .p2-active-filters::-webkit-scrollbar { display: none; }
  body.rava-native-public-archive .p21-active-filter-region .p2-active-filters a { flex: 0 0 auto; min-height: 44px; align-items: center; }

  body.rava-native-public-archive .p21-archive-content .p2-coffee-grid--grid,
  body.rava-native-public-archive .p21-archive-content .p2-coffee-grid--list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  body.rava-native-public-archive .p21-coffee-card--archive,
  body.rava-native-public-archive .p2-coffee-grid--list .p21-coffee-card--archive {
    display: block !important;
    min-height: 0;
  }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__media,
  body.rava-native-public-archive .p2-coffee-grid--list .p21-coffee-card--archive .p21-coffee-card__media {
    display: block;
    block-size: 168px !important;
    min-height: 168px !important;
    border-inline: 0 !important;
    border-block-end: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent) !important;
  }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__body {
    display: block !important;
    min-width: 0;
    padding: 12px 12px 14px !important;
  }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__identity > span { display: inline; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__notes > span:nth-child(n+3) { display: inline-flex; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__evidence {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 12px !important;
  }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__price { text-align: end !important; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__price strong { white-space: normal; }
  body.rava-native-public-archive .p21-load-more__button { width: 100%; min-width: 0 !important; }
}

@media (max-width: 390px) {
  body.rava-native-public-archive .p21-archive-identity { grid-template-columns: 1fr 1.2fr; gap: 10px; }
  body.rava-native-public-archive .p21-archive-identity > h1 { font-size: 24px; }
  body.rava-native-public-archive .p21-archive-identity > span { font-size: 9px; }
  body.rava-native-public-archive .p21-coffee-card--archive .p21-coffee-card__media { block-size: 152px !important; min-height: 152px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.rava-native-public-archive .p21-archive-quick > a,
  body.rava-native-public-archive .p21-archive-quick__arrow,
  body.rava-native-public-archive .p21-archive-search,
  body.rava-native-public-archive .p21-load-more__button,
  body.rava-native-public-archive .p21-filter-panel { transition: none !important; }
}

/* UIUX-11 archive specificity guard against earlier P2 search geometry. */
body.rava-native-public-archive .p21-archive-command__inner { min-height: 0; }
body.rava-native-public-archive .p21-archive-search { gap: 0; padding-inline: 0; }

/* UIUX-12 — sensory artwork landing: superseded by UIUX-13. */
/* UIUX-13 — unified sensory landing: exact supplied artwork, clearer hierarchy, calmer mobile shell. */
/* UIUX-14 — exact final artwork sources, visible Taste Profile arrow, and mobile copy alignment refinement. */
body.rava-native-public-discover .p21-hero {
  background: var(--rava-color-canvas);
}
body.rava-native-public-discover .p21-hero__grid {
  align-items: stretch;
}
body.rava-native-public-discover .p21-landing-art {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--rava-color-text) 11%, transparent);
  border-radius: 16px;
  background: var(--rava-color-surface);
}
body.rava-native-public-discover .p21-landing-art__picture,
body.rava-native-public-discover .p21-landing-art__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.rava-native-public-discover .p21-landing-art__picture img {
  display: block;
  object-fit: cover;
  object-position: center center;
}
body.rava-native-public-discover .p21-landing-art__content {
  position: relative;
  z-index: 2;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 14px;
  padding: clamp(22px, 2.7vw, 36px);
}
body.rava-native-public-discover .p21-landing-art__intro {
  align-self: center;
  width: min(100%, 38rem);
  text-align: center;
}
body.rava-native-public-discover .p21-landing-art__intro h1 {
  max-width: 18ch;
  margin: 0 auto;
  color: var(--rava-color-text);
  font-size: clamp(1.8rem, 2.6vw, 2.75rem);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}
body.rava-native-public-discover .p21-landing-art__cta {
  align-self: center;
  inline-size: min(100%, 21rem);
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-inline: 28px;
  border-radius: 2px;
  box-shadow: none;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: transform 180ms var(--rava-ease-standard), background 180ms var(--rava-ease-standard), color 180ms var(--rava-ease-standard);
}
body.rava-native-public-discover .p21-landing-art__cta-arrow {
  flex: 0 0 auto;
  color: #FBFAF7;
  font-size: 1.05rem;
  line-height: 1;
  transform: translateX(0);
  transition: transform 180ms var(--rava-ease-standard);
}
body.rava-native-public-discover .p21-landing-art__cta:is(:hover,:focus-visible) {
  transform: translateY(-2px);
}
body.rava-native-public-discover .p21-landing-art__cta:is(:hover,:focus-visible) .p21-landing-art__cta-arrow {
  transform: translateX(-3px);
}
body.rava-native-public-discover .p21-landing-art__routes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  direction: rtl;
  border-block: 1px solid color-mix(in srgb, var(--rava-color-text) 14%, transparent);
  background: color-mix(in srgb, var(--rava-color-surface) 86%, transparent);
  backdrop-filter: blur(10px);
}
body.rava-native-public-discover .p21-landing-art__routes > a {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: var(--rava-color-text);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  transition: background 180ms var(--rava-ease-standard), color 180ms var(--rava-ease-standard);
}
body.rava-native-public-discover .p21-landing-art__routes > a + a {
  border-inline-start: 1px solid color-mix(in srgb, var(--rava-color-text) 14%, transparent);
}
body.rava-native-public-discover .p21-landing-art__routes > a span[aria-hidden="true"] {
  flex: 0 0 auto;
  transition: transform 180ms var(--rava-ease-standard);
}
body.rava-native-public-discover .p21-landing-art__routes > a:is(:hover,:focus-visible) {
  background: color-mix(in srgb, var(--rava-color-accent) 6%, var(--rava-color-surface));
  color: var(--rava-color-accent);
}
body.rava-native-public-discover .p21-landing-art__routes > a:is(:hover,:focus-visible) span[aria-hidden="true"] {
  transform: translateX(-3px);
}

@media (min-width: 901px) {
  body.rava-native-public-discover .p21-hero__grid {
    min-height: auto;
    grid-template-columns: minmax(0, 1.65fr) minmax(20rem, .55fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    padding-block: clamp(3.5rem, 6vw, 6rem);
  }
  body.rava-native-public-discover .p21-landing-art {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
  }
  body.rava-native-public-discover .p21-landing-art__content {
    padding-inline: clamp(28px, 3.2vw, 46px);
  }
  body.rava-native-public-discover .p21-landing-art__cta {
    inline-size: min(100%, 24rem);
    min-height: 52px;
  }
  body.rava-native-public-discover .p21-specimen {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    justify-self: stretch;
    width: min(100%, 29rem);
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  body.rava-native-public-discover .p21-specimen__media {
    flex: 1 1 auto;
    min-height: 0;
  }
  body.rava-native-public-discover .p21-specimen__caption {
    flex: 0 0 auto;
  }
}

@media (max-width: 900px) {
  body.rava-native-public-discover .p21-hero {
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-block-end: 1px solid color-mix(in srgb, var(--rava-color-text) 10%, transparent);
  }
  body.rava-native-public-discover .p21-hero__grid {
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  body.rava-native-public-discover .p21-landing-art {
    width: 100%;
    min-height: clamp(460px, 64svh, 560px);
    height: clamp(460px, 64svh, 560px);
    border: 0;
    border-radius: 0;
  }
  body.rava-native-public-discover .p21-landing-art__picture img {
    object-fit: cover;
    object-position: center 24%;
  }
  body.rava-native-public-discover .p21-landing-art__content {
    min-height: 100%;
    gap: 10px;
    padding: 18px 16px calc(82px + var(--rava-safe-bottom));
  }
  body.rava-native-public-discover .p21-landing-art__intro {
    width: min(100%, 28rem);
    margin-inline: auto;
    margin-block-end: 24px;
    text-align: center;
  }
  body.rava-native-public-discover .p21-landing-art__intro h1 {
    width: min(100%, 18ch);
    max-width: none;
    margin-inline: auto;
    font-size: clamp(1.42rem, 6.6vw, 1.95rem);
    line-height: 1.45;
    text-align: justify;
    text-align-last: center;
    text-justify: inter-word;
    text-wrap: pretty;
  }
  body.rava-native-public-discover .p21-landing-art__cta {
    width: 100%;
    justify-content: center;
    align-self: stretch;
    min-height: 50px;
    padding-inline: 16px;
    text-align: center;
  }
  body.rava-native-public-discover .p21-landing-art__routes {
    width: 100%;
    background: rgb(251 250 247 / 88%);
    backdrop-filter: blur(12px) saturate(115%);
  }
  body.rava-native-public-discover .p21-landing-art__routes > a {
    min-height: 52px;
    padding-inline: 12px;
    font-size: .72rem;
  }
  body.rava-native-public-discover .p21-specimen {
    display: none !important;
  }
  body.rava-native-public-discover .p21-section--records {
    padding-block-start: 0 !important;
  }

  /* UIUX-14: keep header and bottom-nav strokes equally fine. */
  body.rava-shell-context-public .rava-mobile-bottom-nav {
    border-width: 1.5px;
    border-color: rgb(23 26 23 / 20%);
    background: rgb(251 250 247 / 94%);
    box-shadow: 0 12px 34px rgb(23 26 23 / 13%);
  }
  body.rava-shell-context-public .rava-mobile-nav-item .rava-svg-icon,
  body.rava-shell-context-public .rava-system-header .rava-icon-button .rava-svg-icon {
    stroke-width: 1.4;
  }
  body.rava-shell-context-public .rava-mobile-nav-item:not(.is-active):not([aria-current="page"]) {
    color: color-mix(in srgb, var(--rava-color-text) 72%, var(--rava-color-text-muted));
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-landing-art {
    min-height: clamp(440px, 62svh, 520px);
    height: clamp(440px, 62svh, 520px);
  }
  body.rava-native-public-discover .p21-landing-art__content {
    padding-inline: 14px;
    padding-block-start: 16px;
  }
  body.rava-native-public-discover .p21-landing-art__intro {
    margin-block-end: 24px;
  }
  body.rava-native-public-discover .p21-landing-art__routes > a {
    min-height: 50px;
    padding-inline: 10px;
    font-size: .68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.rava-native-public-discover .p21-landing-art__cta,
  body.rava-native-public-discover .p21-landing-art__cta-arrow,
  body.rava-native-public-discover .p21-landing-art__routes > a,
  body.rava-native-public-discover .p21-landing-art__routes > a span[aria-hidden="true"] {
    transition: none !important;
    transform: none !important;
  }
}

/* UIUX-15 — centered outlined landing statement and lower mobile actions. */
body.rava-native-public-discover .p21-landing-art__intro h1 {
  max-width: 22ch;
  color: #FBFAF7;
  font-size: clamp(1.45rem, 2vw, 2.05rem);
  font-weight: 500;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  -webkit-text-stroke: .75px #171A17;
  paint-order: stroke fill;
}

@media (max-width: 900px) {
  body.rava-native-public-discover .p21-landing-art {
    min-height: clamp(520px, 70svh, 680px);
    height: clamp(520px, 70svh, 680px);
  }

  body.rava-native-public-discover .p21-landing-art__content {
    position: relative;
    min-height: 100%;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 16px 22px;
  }

  body.rava-native-public-discover .p21-landing-art__intro {
    position: absolute;
    z-index: 3;
    inset-inline: 16px;
    inset-block-start: 50%;
    width: auto;
    max-width: none;
    margin: 0;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
  }

  body.rava-native-public-discover .p21-landing-art__intro h1 {
    width: min(78vw, 18rem);
    max-width: none;
    margin: 0 auto;
    color: #FBFAF7;
    font-size: clamp(1.22rem, 5.5vw, 1.55rem);
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
    text-align-last: auto;
    text-justify: auto;
    text-wrap: balance;
    -webkit-text-stroke: .7px #171A17;
    paint-order: stroke fill;
  }

  body.rava-native-public-discover .p21-landing-art__cta {
    margin-block-start: auto;
  }
}

@media (max-width: 390px) {
  body.rava-native-public-discover .p21-landing-art {
    min-height: clamp(500px, 70svh, 640px);
    height: clamp(500px, 70svh, 640px);
  }

  body.rava-native-public-discover .p21-landing-art__content {
    padding-block-start: 14px;
    padding-block-end: 18px;
  }

  body.rava-native-public-discover .p21-landing-art__intro {
    inset-inline: 14px;
    margin: 0;
  }

  body.rava-native-public-discover .p21-landing-art__intro h1 {
    width: min(80vw, 17rem);
    font-size: clamp(1.16rem, 5.4vw, 1.42rem);
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  body.rava-native-public-discover .p21-landing-art__intro {
    transform: translateY(-50%) !important;
  }
}

/* UIUX-16 — lighter black landing statement, lower mobile focal point, two-line desktop lock. */
body.rava-native-public-discover .p21-landing-art__intro {
  width: min(100%, 44rem);
}
body.rava-native-public-discover .p21-landing-art__intro h1 {
  width: min(100%, 42rem);
  max-width: none;
  color: #171A17;
  font-size: clamp(1.5rem, 2.05vw, 2rem);
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  -webkit-text-stroke: 0;
  paint-order: normal;
}
body.rava-native-public-discover .p21-landing-art__title-line {
  display: block;
}

@media (min-width: 901px) {
  body.rava-native-public-discover .p21-landing-art__title-line {
    white-space: nowrap;
  }
}

@media (max-width: 900px) {
  body.rava-native-public-discover .p21-landing-art__intro {
    inset-block-start: 57%;
  }
  body.rava-native-public-discover .p21-landing-art__intro h1 {
    width: min(84vw, 19rem);
    color: #171A17;
    font-size: clamp(1.14rem, 5vw, 1.38rem);
    font-weight: 400;
    line-height: 1.72;
    -webkit-text-stroke: 0;
    paint-order: normal;
  }
  body.rava-native-public-discover .p21-landing-art__title-line {
    display: inline;
  }
  body.rava-native-public-discover .p21-landing-art__title-line + .p21-landing-art__title-line::before {
    content: " ";
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
  body.rava-native-public-discover .p21-landing-art__intro {
    transform: translateY(-50%) !important;
  }
}