/* Second QA correction from the locally rendered 432×768 evidence. */

/* Exact inner width: frame 380 -> content 356, matching the reference. */
.hr2-frame {
  padding-left: calc(var(--page-w) * .025463);
  padding-right: calc(var(--page-w) * .025463);
}

/* Target points capsule is slightly narrower and sits against the right guide. */
.hr2-points {
  min-width: calc(var(--page-w) * .1991);
  padding-right: calc(var(--page-w) * .021);
}

/* Reference card begins around y=282. Move only the visual carousel pieces,
   preserving hero/store flow and therefore the 628px store anchor. */
.hr2-card-main {
  top: calc(var(--page-w) * .022);
  border-radius: calc(var(--page-w) * .0463);
}

.hr2-card-side {
  top: calc(var(--page-w) * .1262);
}

.hr2-arrow {
  margin-top: calc(var(--page-w) * .022);
}

.hr2-dots {
  top: calc(var(--page-w) * .575);
}

/* Less decorative foliage: reference uses the plant as a side accent, not a wash. */
.hr2-hero::after {
  background-position:
    left calc(var(--page-w) * -.03) top calc(var(--page-w) * .28),
    right calc(var(--page-w) * -.055) top calc(var(--page-w) * .255),
    right calc(var(--page-w) * -.18) top calc(var(--page-w) * .028);
  background-size:
    calc(var(--page-w) * .17) calc(var(--page-w) * .47),
    calc(var(--page-w) * .29) calc(var(--page-w) * .20),
    calc(var(--page-w) * .64) calc(var(--page-w) * .29);
  opacity: .43;
}

.hr2-card-main img {
  filter: brightness(1.06) saturate(.76) sepia(.045) hue-rotate(-3deg) contrast(.98);
}

/* Watercolor store vignette closer to the approved target. */
.hr2-store::after {
  top: calc(var(--page-w) * -.0093);
  right: calc(var(--page-w) * -.0093);
  width: calc(var(--page-w) * .385);
  height: calc(var(--page-w) * .19);
  background-image: url('/homepage-v280-production/assets/cottage-v22.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4');
  background-position: right center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: .94;
}

.hr2-store-copy {
  position: relative;
  z-index: 3;
}

.hr2-store-mark,
.hr2-store > em {
  z-index: 4;
}

/* 2.5.1: keep the reference composition fixed by width. Tall phones gain
   breathing room below the artwork instead of stretching the hero panel. */
.hr2-frame {
  height: calc(var(--page-w) * 1.520833) !important;
  min-height: calc(var(--page-w) * 1.520833) !important;
  max-height: calc(var(--page-w) * 1.520833);
  block-size: calc(var(--page-w) * 1.520833) !important;
  min-block-size: calc(var(--page-w) * 1.520833) !important;
  max-block-size: calc(var(--page-w) * 1.520833);
  grid-template-rows:
    calc(var(--page-w) * .083333)
    auto
    calc(var(--page-w) * 1.097222)
    auto;
  align-content: start;
}

.hr2-hero {
  height: calc(var(--page-w) * 1.097222);
  min-height: calc(var(--page-w) * 1.097222);
}

/* Match the supplied title scale while preserving the card's y anchor. */
.hr2-hero-copy h1 {
  margin-top: calc(var(--page-w) * .0255);
  color: #476253;
  font-size: clamp(32px, 8.45vw, 36.5px);
  line-height: 1.02;
}

.hr2-hero-copy > small {
  font-size: clamp(7.4px, 1.9vw, 8.2px);
  letter-spacing: .285em;
}

.hr2-hero-copy > p {
  margin-top: calc(var(--page-w) * .0255);
  font-size: clamp(9.2px, 2.32vw, 10px);
}

.hr2-carousel {
  margin-top: calc(var(--page-w) * .00694);
  touch-action: pan-y;
}

/* The reference has visible rice-paper mountains, a long sage branch and
   fine gold curves around the central card. */
.hr2-app::after {
  top: calc(var(--page-w) * -.06);
  right: calc(var(--page-w) * -.20);
  width: calc(var(--page-w) * .95);
  height: calc(var(--page-w) * .40);
  opacity: .42;
}

.hr2-app {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), rgba(249,244,234,.10)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center/190px 190px repeat,
    #f2eee5;
}

.hr2-frame::after {
  top: calc(var(--page-w) * -.15);
  right: calc(var(--page-w) * -.29);
  width: calc(var(--page-w) * .95);
  height: calc(var(--page-w) * .39);
  opacity: .36;
}

.hr2-hero::after {
  inset: calc(var(--page-w) * -.02) calc(var(--page-w) * -.08) calc(var(--page-w) * -.03) calc(var(--page-w) * -.09);
  background-position:
    left 0 top calc(var(--page-w) * -.093),
    right 0 top calc(var(--page-w) * .11),
    right calc(var(--page-w) * -.15) top calc(var(--page-w) * .01);
  background-size:
    calc(var(--page-w) * .28) calc(var(--page-w) * 1.13),
    calc(var(--page-w) * .43) calc(var(--page-w) * .30),
    calc(var(--page-w) * 1.02) calc(var(--page-w) * .45);
  opacity: .68;
}

.hr2-frame,
.hr2-hero {
  overflow: visible;
}

.hr2-frame::before,
.hr2-hero::before {
  border-radius: inherit;
}

.hr2-card-main img,
.hr2-card-main video {
  object-position: center 22%;
  transform: none;
  filter: brightness(1.14) saturate(.64) sepia(.06) hue-rotate(-5deg) contrast(.86);
}

.hr2-card-main {
  width: calc(var(--page-w) * .536);
  aspect-ratio: 231.5 / 266;
}

.hr2-card-side {
  aspect-ratio: .50;
}

.hr2-card-side.is-left {
  left: calc(var(--page-w) * .005);
}

.hr2-card-side.is-right {
  right: calc(var(--page-w) * .005);
}

.hr2-side-label {
  position: absolute;
  z-index: 4;
  color: rgba(255,255,255,.82);
  font-family: var(--serif);
  font-size: clamp(6.8px, 1.75vw, 7.6px);
  letter-spacing: .04em;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}

.hr2-card-side.is-left .hr2-side-label {
  top: calc(var(--page-w) * .035);
  left: calc(var(--page-w) * .022);
}

.hr2-card-side.is-right .hr2-side-label {
  right: calc(var(--page-w) * .018);
  bottom: calc(var(--page-w) * .030);
}

.hr2-arrow {
  width: calc(var(--page-w) * .0787);
  height: calc(var(--page-w) * .0787);
  margin-top: calc(var(--page-w) * .0127);
}

.hr2-arrow.is-left { left: calc(var(--page-w) * .0116); }
.hr2-arrow.is-right { right: calc(var(--page-w) * .0116); }

.hr2-dots {
  top: calc(var(--page-w) * .600);
  left: calc(50% - var(--page-w) * .228);
}

.hr2-draw-grid {
  flex-basis: calc(var(--page-w) * .0995);
  height: calc(var(--page-w) * .0995);
}

.hr2-announcement {
  margin-bottom: calc(var(--page-w) * .02315);
}

.hr2-announcement > span {
  display: inline-flex;
  align-items: center;
  height: calc(var(--page-w) * .037);
  padding: 0 calc(var(--page-w) * .0139);
}

.hr2-announcement p {
  margin-left: calc(var(--page-w) * .0266);
}

.hr2-store {
  margin-top: calc(var(--page-w) * .0197);
}

#yr-homepage-reference-v2 {
  --nav-base: calc(var(--page-w) * .1088);
}

#yr-homepage-reference-v2 .hr2-arrow svg { stroke-width: 1.35; }
#yr-homepage-reference-v2 .hr2-bottom-nav svg { stroke-width: 1.38; }
#yr-homepage-reference-v2 .hr2-top-actions svg { stroke-width: 1.45; }
#yr-homepage-reference-v2 .hr2-draw-btn > span svg { fill: currentColor; stroke: none; }

.hr2-card img,
.hr2-card video,
.hr2-detail-art img,
.hr2-detail-art video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.hr2-card video::-webkit-media-controls,
.hr2-detail-art video::-webkit-media-controls {
  display: none !important;
}

.hr2-arrow::before {
  content: "";
  position: absolute;
  inset: calc(var(--page-w) * -.015);
}

.hr2-dots button {
  position: relative;
}

.hr2-dots button::before {
  content: "";
  position: absolute;
  inset: -10px -4px;
}

.hr2-top-actions button.is-refreshing svg {
  animation: hr2-refresh-spin .8s linear infinite;
}

@keyframes hr2-refresh-spin {
  to { transform: rotate(360deg); }
}

.hr2-rule-probability {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 14px 0;
}

.hr2-rule-probability b {
  padding: 10px 6px;
  border: 1px solid rgba(82,109,88,.14);
  border-radius: 12px;
  background: #f3f4ec;
  color: #3f705f;
  text-align: center;
}

.hr2-detail-art {
  transition: width .2s ease, aspect-ratio .2s ease;
}

.hr2-detail-art.is-zoomed {
  width: 100%;
  aspect-ratio: auto;
  min-height: min(72dvh, 680px);
  overflow: auto;
}

.hr2-detail-art.is-zoomed :is(img, video) {
  height: auto;
  min-height: 100%;
  object-fit: contain;
}

.hr2-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.hr2-detail-actions > :is(a, button, span) {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 10px 13px;
  border-radius: 14px;
  text-align: center;
  text-decoration: none;
}

.hr2-detail-lock {
  border: 1px solid rgba(82,109,88,.14);
  background: #f3f4ee;
  color: #6d7b73;
  font-size: 13px;
}

@media (max-width: 374px) {
  .hr2-hero-copy h1 { font-size: 30.5px; }
  .hr2-detail-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hr2-top-actions button.is-refreshing svg { animation: none; }
  .hr2-detail-art { transition: none; }
}

/* 2.5.1 material-fidelity pass.
   Geometry and all business interactions stay locked; this block only replaces
   the flat paint layer with the warmer rice-paper/watercolor treatment in the
   authoritative 864×1536 reference. */
#yr-homepage-reference-v2 {
  --page: #efebe2;
  --paper: #f2eee4;
  --paper-strong: #f8f4e9;
  --pine: #526f60;
  --pine-deep: #263f36;
  --muted: #777b74;
  --sage: #819a7f;
  --gold: #a99867;
  --line: rgba(133, 119, 91, .16);
  --gold-line: rgba(176, 147, 91, .31);
  background: #e8e5dc;
}

.hr2-app {
  background:
    linear-gradient(180deg, rgba(250,248,240,.44), rgba(229,226,217,.13)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 178px 178px repeat,
    #eeebe1;
  box-shadow: 0 0 58px rgba(48, 52, 42, .12);
}

.hr2-app::before {
  opacity: .56;
  background:
    radial-gradient(ellipse at 10% 18%, rgba(205,211,196,.34), transparent 26%),
    radial-gradient(ellipse at 91% 11%, rgba(193,205,198,.42), transparent 33%),
    linear-gradient(180deg, rgba(255,253,246,.32), transparent 31%);
}

.hr2-page-wash {
  background: radial-gradient(ellipse at 52% 25%, rgba(255,253,246,.58), rgba(255,253,246,0) 70%);
}

.hr2-app::after,
.hr2-frame::after {
  background-image: url('/homepage-v280-production/assets/mountains-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4');
  filter: saturate(.72) contrast(1.12) brightness(.93);
}

.hr2-app::after { opacity: .58; }
.hr2-frame::after { opacity: .48; }

.hr2-topbar {
  border-bottom-color: rgba(87, 91, 74, .10);
}

.hr2-round-mark,
.hr2-mini-mark {
  border-color: rgba(132, 137, 99, .18);
  background:
    radial-gradient(circle at 31% 24%, rgba(255,255,255,.72), transparent 32%),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 92px 92px,
    linear-gradient(145deg, #d9d8b9, #9eb292);
  background-blend-mode: screen, soft-light, normal;
  box-shadow:
    0 5px 14px rgba(53, 65, 49, .105),
    inset 0 1px rgba(255,255,255,.78),
    inset 0 -4px 9px rgba(91,111,80,.07);
  color: #264b3d;
}

.hr2-brand b {
  color: #263f36;
  font-weight: 500;
}

.hr2-frame {
  border-color: rgba(146, 126, 86, .16);
  background:
    linear-gradient(180deg, rgba(246,243,234,.70), rgba(237,234,225,.90)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 178px 178px repeat;
  box-shadow:
    0 15px 34px rgba(66, 61, 47, .065),
    inset 0 1px rgba(255,255,255,.83);
  -webkit-backdrop-filter: blur(9px) saturate(.84);
  backdrop-filter: blur(9px) saturate(.84);
}

.hr2-frame::before {
  opacity: .64;
  background:
    radial-gradient(ellipse at 3% 21%, rgba(195,207,190,.24), transparent 29%),
    radial-gradient(ellipse at 97% 30%, rgba(203,210,201,.20), transparent 32%),
    linear-gradient(105deg, rgba(255,253,247,.21), transparent 38%, rgba(187,196,187,.10));
}

.hr2-points,
.hr2-announcement {
  border-color: rgba(143, 124, 88, .15);
  background: rgba(248,245,236,.76);
  -webkit-backdrop-filter: blur(9px) saturate(.86);
  backdrop-filter: blur(9px) saturate(.86);
  box-shadow: 0 6px 16px rgba(69, 66, 52, .055), inset 0 1px rgba(255,255,255,.72);
}

.hr2-points > span {
  background: linear-gradient(145deg, #cdd5b4, #aebf9b);
  box-shadow: inset 0 1px rgba(255,255,255,.62);
}

.hr2-announcement > span {
  background:
    linear-gradient(180deg, rgba(119,148,123,.98), rgba(75,111,91,.98)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 88px 88px;
  background-blend-mode: multiply;
}

.hr2-hero {
  border-color: rgba(176, 145, 88, .32);
  background:
    linear-gradient(90deg, rgba(246,242,231,.74) 0%, rgba(246,242,231,.40) 17%, rgba(246,242,231,0) 34%),
    var(--hr2-hero-watercolor) center / 100% 100% no-repeat,
    #f1ede2;
  box-shadow:
    inset 0 1px rgba(255,255,255,.86),
    0 9px 24px rgba(73, 62, 43, .055);
}

.hr2-hero::before {
  z-index: 1;
  opacity: .40;
  background:
    linear-gradient(180deg, rgba(239,244,236,.18), rgba(251,248,240,.08)),
    linear-gradient(90deg, rgba(248,245,236,.32), transparent 26%, transparent 76%, rgba(248,245,236,.10)),
    linear-gradient(180deg, rgba(255,253,247,.18), transparent 24%);
}

.hr2-hero::after { content: none; }

.hr2-hero-mountains,
.hr2-hero-foliage,
.hr2-hero-swirls { display: none !important; }

/* The vine sits over the recessed left card and beneath the central card,
   matching the layered depth in the reference without covering controls. */
.hr2-carousel::before {
  content: "";
  position: absolute;
  top: calc(var(--page-w) * -.205);
  left: calc(var(--page-w) * -.070);
  z-index: 2;
  width: calc(var(--page-w) * .245);
  height: calc(var(--page-w) * .86);
  pointer-events: none;
  background: var(--hr2-foliage-watercolor) left top / 100% 100% no-repeat;
  opacity: .48;
  filter: brightness(1.10) saturate(.55) sepia(.015) contrast(.88);
}

.hr2-hero-copy h1 {
  color: #3c5d4e;
  font-weight: 400;
  text-shadow: 0 2px 13px rgba(250,247,238,.66);
}

.hr2-hero-copy > small { color: #757f78; }
.hr2-hero-copy > p { color: #696f69; }

.hr2-hero-copy > div span {
  border-color: rgba(117, 117, 99, .15);
  background: rgba(245,242,233,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.52), 0 2px 7px rgba(66,62,49,.025);
  color: #6d736d;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.hr2-card-main {
  border-color: rgba(178, 151, 99, .57);
  box-shadow:
    0 15px 27px rgba(25, 35, 30, .18),
    0 0 0 2px rgba(248,242,227,.72),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

.hr2-card-main img,
.hr2-card-main video {
  object-position: center 20%;
  filter: brightness(1.10) saturate(.74) sepia(.030) hue-rotate(-3deg) contrast(.96);
}

.hr2-card-main::after {
  background:
    linear-gradient(180deg, rgba(246,242,228,.045), rgba(246,242,228,.025) 58%, transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0) 57%, rgba(4,10,9,.03) 69%, rgba(3,9,8,.76) 100%);
}

.hr2-card-caption {
  bottom: calc(var(--page-w) * .0417);
}

.hr2-card-caption > b {
  transform: translateY(calc(var(--page-w) * .0093));
}

.hr2-card-side {
  opacity: 1;
  filter: none;
  border-color: rgba(156, 142, 108, .34);
  box-shadow: 0 10px 19px rgba(38, 46, 40, .11);
}

.hr2-card-side img,
.hr2-card-side video {
  opacity: .63;
  filter: grayscale(.48) saturate(.50) sepia(.045) brightness(1.02) contrast(.78);
}

.hr2-card-side::after {
  background: linear-gradient(90deg, rgba(244,240,229,.24), rgba(54,61,55,.08));
}

.hr2-rarity {
  background: rgba(133,158,124,.90);
  box-shadow: inset 0 1px rgba(255,255,255,.40), 0 4px 11px rgba(20,36,27,.13);
  color: #315443;
}

.hr2-arrow {
  border-color: rgba(255,253,244,.86);
  background: rgba(238,239,219,.88);
  box-shadow: 0 6px 14px rgba(36, 50, 42, .14), inset 0 0 0 1px rgba(100,124,99,.13);
  color: #557868;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.hr2-draw-meta { color: #646a64; }
.hr2-draw-meta b { color: #3d6553; }

.hr2-draw-btn {
  border-color: rgba(238,230,207,.58);
  filter: saturate(.82) brightness(1.03);
  box-shadow:
    0 6px 13px rgba(54, 55, 44, .11),
    inset 0 1px rgba(255,255,255,.30),
    inset 0 -8px 18px rgba(45,55,44,.055);
}

.hr2-draw-btn.is-single {
  background:
    linear-gradient(102deg, rgba(143,166,142,.97), rgba(108,131,111,.97)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 126px 126px;
  background-blend-mode: multiply;
}

.hr2-draw-btn.is-ten {
  background:
    linear-gradient(102deg, rgba(184,170,124,.97), rgba(120,134,110,.97)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 126px 126px;
  background-blend-mode: multiply;
}

.hr2-store {
  border-color: rgba(171, 143, 91, .31);
  background:
    linear-gradient(100deg, rgba(248,245,235,.88), rgba(244,241,231,.72)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 160px 160px repeat;
  box-shadow: 0 8px 21px rgba(69, 60, 43, .048), inset 0 1px rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(7px) saturate(.88);
  backdrop-filter: blur(7px) saturate(.88);
}

.hr2-store::after {
  top: calc(var(--page-w) * -.006);
  right: calc(var(--page-w) * .012);
  width: calc(var(--page-w) * .350);
  height: calc(var(--page-w) * .170);
  background: var(--hr2-cottage-watercolor) right center / contain no-repeat;
  opacity: .78;
  filter: saturate(.74) sepia(.035) brightness(1.02);
}

.hr2-store-copy {
  max-width: calc(var(--page-w) * .405);
}

.hr2-store-mark {
  border-color: rgba(132, 143, 105, .19);
  background:
    linear-gradient(145deg, rgba(112,148,117,.98), rgba(62,102,80,.98)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 88px 88px;
  background-blend-mode: multiply;
  box-shadow: 0 6px 15px rgba(42,64,50,.12), inset 0 1px rgba(255,255,255,.27);
}

.hr2-bottom-nav {
  border-top: 1px solid rgba(136, 121, 88, .11);
  background:
    linear-gradient(rgba(246,243,234,.91), rgba(244,241,232,.94)),
    url('/homepage-v280-production/assets/paper-v21.svg?v=2.8.0-ded9e4f9e1c3e6dccde450ab9b15570d7946bff4') center / 150px 150px repeat;
  box-shadow: 0 -5px 17px rgba(48, 52, 43, .055);
  -webkit-backdrop-filter: blur(12px) saturate(.84);
  backdrop-filter: blur(12px) saturate(.84);
}

.hr2-nav-btn > b { background: #a78e59; }

.hr2-nav-btn.is-active svg {
  fill: currentColor;
}