/* ==========================================================================
   ZEROMYTH · HOME
   Golden yellow + off-white, charcoal type, Montserrat display set tight and
   upper-case (per the brand guidelines), Caveat for hand-written asides.
   ========================================================================== */
body[data-page="home"] { --offwhite: #FFFBF1; background: var(--yellow); }
.script { font-family: var(--f-script); font-weight: 600; }

/* ---------- preloader ----------
   Dark roast backdrop so the yellow + green logo reads clearly. The markup is
   static in index.html, so it (and the makhana you can pop) works before any
   script has downloaded on a slow connection. Kernels are pure CSS: no images
   to wait for. */
html.is-pre { overflow: hidden; }
.pre {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; overflow: hidden;
  clip-path: inset(0 0 0 0); cursor: default; color: var(--cream);
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(253, 219, 94, .10) 0%, rgba(253, 219, 94, 0) 70%),
    radial-gradient(90% 70% at 18% 100%, rgba(153, 202, 60, .14) 0%, rgba(153, 202, 60, 0) 60%),
    radial-gradient(120% 90% at 50% 40%, #2e2c17 0%, #222111 55%, #151409 100%);
  transition: opacity .5s ease;
}
.no-js .pre { display: none; }
.pre.is-gone { opacity: 0; pointer-events: none; }
.pre__field { position: absolute; inset: 0; z-index: 1; }
.pre__inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; padding: 0 24px; text-align: center; pointer-events: none; }
.pre__logo { width: clamp(160px, 22vw, 260px); height: auto; will-change: transform, clip-path; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .45)); animation: preLogoIn .9s cubic-bezier(.16, 1, .3, 1) backwards; }
.pre__bar { width: clamp(160px, 22vw, 260px); height: 4px; border-radius: 4px; background: rgba(251, 246, 233, .14); overflow: hidden; }
.pre__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--green), var(--yellow)); transform-origin: 0 50%; transform: scaleX(0); animation: preBar 7s cubic-bezier(.15, .7, .25, 1) .2s forwards; }
.pre__line { font: 600 22px/1 var(--f-script); color: var(--cream); animation: preUp .5s ease .3s backwards; }
.pre__hint { max-width: 34ch; font-size: 13px; font-weight: 600; line-height: 1.45; color: rgba(251, 246, 233, .72); opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
.pre__hint b { color: var(--yellow); font-weight: 800; }
.pre.is-slow .pre__hint { opacity: 1; transform: none; }
.pre__k {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent; user-select: none;
  animation: preFloat var(--d, 4s) ease-in-out var(--dl, 0s) infinite alternate;
}
.pre__k::before {
  content: ''; position: absolute; inset: 0; border-radius: 47% 53% 44% 56% / 52% 46% 54% 48%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(ellipse 22% 15% at 63% 64%, rgba(122, 80, 32, .6), rgba(122, 80, 32, 0) 70%),
    radial-gradient(ellipse 13% 10% at 36% 72%, rgba(122, 80, 32, .45), rgba(122, 80, 32, 0) 70%),
    radial-gradient(ellipse 11% 8% at 72% 33%, rgba(122, 80, 32, .4), rgba(122, 80, 32, 0) 70%),
    radial-gradient(circle at 42% 38%, #FFFCF1 0%, #F4E7C6 42%, #E2CB98 70%, #BE9A5E 100%);
  box-shadow: inset -6px -8px 14px rgba(140, 100, 40, .35), 0 14px 24px rgba(0, 0, 0, .4);
  transform: rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.pre__k:hover::before { transform: rotate(var(--r, 0deg)) scale(1.14); }
.pre__k.is-pop { pointer-events: none; }
.pre__k.is-pop::before { animation: prePop .42s cubic-bezier(.2, .8, .3, 1) forwards; }
.pre__crumb { position: absolute; width: var(--c); height: var(--c); margin: calc(var(--c) / -2) 0 0 calc(var(--c) / -2); border-radius: 2px; background: var(--col); pointer-events: none; animation: preCrumb .85s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes preLogoIn { from { clip-path: inset(100% 0 0 0); transform: scale(.86); } to { clip-path: inset(0 0 0 0); transform: scale(1); } }
@keyframes preBar { from { transform: scaleX(0); } to { transform: scaleX(.88); } }
@keyframes preUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes preFloat { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(var(--fx, 12px), var(--fy, -18px), 0) rotate(var(--fr, 25deg)); } }
@keyframes prePop { 0% { transform: rotate(var(--r, 0deg)) scale(1); opacity: 1; } 35% { transform: rotate(var(--r, 0deg)) scale(1.35); opacity: 1; } 100% { transform: rotate(var(--r, 0deg)) scale(.15); opacity: 0; } }
@keyframes preCrumb { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

/* ---------- the pour ---------- */
.pour { position: relative; min-height: 100svh; background: var(--yellow); color: var(--charcoal); overflow: hidden; isolation: isolate; padding: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) 0 clamp(26px, 4vh, 44px); display: grid; }
.pour__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pour__k { position: absolute; left: 0; top: 0; height: auto; will-change: transform; filter: drop-shadow(0 10px 10px rgba(80, 60, 10, .28)); user-select: none; -webkit-user-drag: none; }
.pour__k--half { z-index: 2; }
.pour.is-grabbing { cursor: grabbing; }
.pour__inner { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr auto auto auto; align-content: start; min-height: calc(100svh - var(--nav-h) - 80px); }
.pour__brand { display: flex; justify-content: space-between; gap: 16px; border-top: 1.5px solid var(--charcoal); padding-top: 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.pour__title { align-self: center; margin: clamp(22px, 4vh, 48px) 0 0; font: 900 clamp(3rem, 8.6vw, 9.6rem)/.86 var(--f-display); letter-spacing: -.045em; text-transform: uppercase; }
.pour__line { display: block; overflow: hidden; padding: .04em 0 .06em; margin-bottom: -.1em; }
.pour__lineIn { display: inline-block; will-change: transform; }
.pour__boring { position: relative; display: inline-block; }
.pour__strike { position: absolute; left: -3%; top: 34%; width: 106%; height: 46%; overflow: visible; pointer-events: none; }
.pour__strike path { fill: none; stroke: var(--green); stroke-width: 12; stroke-linecap: round; }
.pour__note { position: relative; justify-self: end; margin: -0.1em clamp(0px, 10vw, 180px) 0 0; z-index: 4; font: 700 clamp(2rem, 3.6vw, 3.4rem)/1 var(--f-script); color: var(--charcoal); transform: rotate(-6deg); display: flex; align-items: flex-start; gap: 6px; pointer-events: none; }
.pour__note svg { width: clamp(56px, 6vw, 96px); height: auto; margin-top: .4em; overflow: visible; }
.pour__note path { fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.pour__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: clamp(24px, 4vh, 44px); max-width: min(100%, 980px); position: relative; z-index: 4; }
.pour__sub {
  max-width: 44ch;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--charcoal);
  text-wrap: balance;
}
.pour__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.pour__proof { display: flex; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; margin-top: clamp(20px, 3vh, 32px); padding-top: 14px; border-top: 1.5px solid rgba(34, 33, 17, .2); font-size: 13px; font-weight: 600; position: relative; z-index: 4; }
.pour__proof b { font-weight: 800; }
html.is-loading .pour__title, html.is-loading [data-pour-fade], html.is-loading [data-pour-note] { visibility: hidden; }

/* ---------- zero myths / just crunch ---------- */
.expand { position: relative; background: var(--yellow); color: var(--charcoal); }
.js .expand { height: 280vh; }
.expand__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.expand__title { position: absolute; inset: 0; z-index: 3; display: grid; align-content: space-between; padding: calc(var(--nav-h) + 4vh) var(--gutter) 6vh; pointer-events: none; font: 900 clamp(3.4rem, 10vw, 11.5rem)/.82 var(--f-display); letter-spacing: -.05em; text-transform: uppercase; }
.expand__word { display: block; will-change: transform; }
.expand__word--r { text-align: right; color: var(--charcoal); }
.expand__word--l { -webkit-text-stroke: 0; }
.expand__media { position: absolute; inset: 0; margin: 0; z-index: 2; overflow: hidden; will-change: clip-path, transform; transform-origin: center center; }
.expand__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; transform-origin: center center; }
.expand__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 19, 10, 0) 45%, rgba(20, 19, 10, .7) 100%); pointer-events: none; }
.expand__cap { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 6vh; z-index: 2; color: var(--cream); display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.expand__cap-big { font: 900 clamp(2rem, 4.6vw, 4.6rem)/.92 var(--f-display); letter-spacing: -.035em; text-transform: uppercase; }
.expand__cap ul { display: flex; gap: 8px; flex-wrap: wrap; }
.expand__cap li { padding: 9px 14px; border-radius: 999px; background: rgba(251, 246, 233, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(251, 246, 233, .3); font-size: 13px; font-weight: 600; }
.expand__scribble { position: absolute; z-index: 4; right: calc(33vw - 40px); bottom: 24vh; font: 700 clamp(1.4rem, 2vw, 2rem)/1 var(--f-script); transform: rotate(-8deg); }
.expand.is-static { height: auto; }
.expand.is-static .expand__sticky { position: relative; height: auto; display: block; padding: 90px 0 0; }
.expand.is-static .expand__title { position: relative; padding: 0 var(--gutter) 30px; }
.expand.is-static .expand__media { position: relative; aspect-ratio: 3 / 2; }
.expand.is-static .expand__scribble { display: none; }

/* ---------- pond chapter (shares .enter styles from pages.css) ---------- */
body[data-page="home"] .enter__line--1 { text-transform: uppercase; }
body[data-page="home"] .enter__big { text-transform: uppercase; }

/* ---------- proof cards ---------- */
.proofx { background: var(--offwhite); color: var(--charcoal); }
.proofx__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.proofx__head .h-l { max-width: 12ch; text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; }
.proofx__note { font: 700 clamp(1.5rem, 2.2vw, 2.1rem)/1 var(--f-script); transform: rotate(-4deg); color: var(--rust); }
.proofx__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
/* The <li> only carries the one-off scroll reveal (GSAP). The visible card is
   .pcard__in, which floats on a constant CSS loop and lifts on hover with the
   separate `translate`/`scale` properties, so nothing ever fights over the same
   transform and there is no pointer-driven 3D tilt left to flicker. */
.pcard { position: relative; display: grid; }
.pcard__in {
  position: relative; height: 100%; border-radius: 28px; background: #fff; color: var(--charcoal); padding: 12px;
  display: grid; grid-template-rows: auto 1fr; gap: 6px;
  box-shadow: 0 18px 40px rgba(34, 33, 17, .10), 0 2px 6px rgba(34, 33, 17, .06);
  animation: pcardFloat 6s ease-in-out infinite;
  transition: translate .5s var(--ease-out), scale .5s var(--ease-out), box-shadow .5s var(--ease-out);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.pcard:nth-child(2) .pcard__in { animation-delay: -2s; }
.pcard:nth-child(3) .pcard__in { animation-delay: -4s; }
.pcard--yellow .pcard__in { background: var(--yellow); }
.pcard--ink .pcard__in { background: var(--charcoal); color: var(--cream); }
.pcard:hover .pcard__in, .pcard:focus-within .pcard__in { translate: 0 -6px; scale: 1.015; box-shadow: 0 30px 60px rgba(34, 33, 17, .18), 0 2px 6px rgba(34, 33, 17, .06); }
@keyframes pcardFloat { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -10px, 0); } }
.pcard__link { position: absolute; inset: 0; z-index: 6; border-radius: inherit; }
.pcard__link:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 4px; }
.pcard--ink .pcard__link:focus-visible { outline-color: var(--yellow); }
.pcard__media { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3.2; background: var(--paper); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.1s var(--ease-out), filter .6s; filter: saturate(.9); }
.pcard:hover .pcard__media img, .pcard:focus-within .pcard__media img { transform: scale(1.12); filter: saturate(1.08); }
.pcard__body { padding: 16px 12px 14px; display: grid; gap: 10px; align-content: start; }
.pcard__tag { justify-self: start; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; }
.pcard h3 { font: 800 clamp(1.4rem, 2vw, 1.9rem)/1.02 var(--f-display); letter-spacing: -.03em; }
.pcard p { font-size: 15px; opacity: .8; }
.pcard__cta { font-weight: 800; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; }
.pcard__cta::after { content: '→'; transition: transform .45s var(--ease-out); }
.pcard:hover .pcard__cta::after, .pcard:focus-within .pcard__cta::after { transform: translateX(6px); }

/* ---------- lineup refinements ---------- */
body[data-page="home"] .lineup { background: var(--charcoal); }
body[data-page="home"] .lineup__head .h-l { text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; }
.lp__name { text-transform: uppercase; letter-spacing: -.045em !important; font-weight: 900 !important; }
.lp__mood { position: absolute; right: clamp(20px, 3vw, 40px); bottom: clamp(16px, 2.6vw, 34px); font: 700 clamp(3rem, 6vw, 6rem)/.8 var(--f-script); opacity: .22; pointer-events: none; }
.lp__kernel img { width: 100%; height: auto; }

/* ---------- myth deck ---------- */
.deckx { background: var(--yellow); color: var(--charcoal); overflow: hidden; }
.deckx__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.deckx__copy { display: grid; gap: 22px; }
.deckx__copy .h-l { text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; max-width: 12ch; }
.deckx__lede { max-width: 44ch; font-size: 17px; font-weight: 500; }
.deckx__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.deckx__count { font: 700 24px/1 var(--f-script); }
.deck { position: relative; height: clamp(380px, 52vh, 520px); width: min(100%, 460px); justify-self: center; }
.dcard { position: absolute; inset: 0; border-radius: 30px; transform-origin: 50% 90%; touch-action: none; }
.dcard__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--ease-out); cursor: grab; text-align: left; }
.dcard:active .dcard__inner { cursor: grabbing; }
.dcard__inner[aria-pressed="true"] { transform: rotateY(180deg); }
.dcard__face { position: absolute; inset: 0; border-radius: 30px; padding: clamp(24px, 3vw, 36px); display: grid; grid-template-rows: auto 1fr auto; gap: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 30px 60px rgba(60, 40, 0, .22), inset 0 0 0 1.5px rgba(34, 33, 17, .12); }
.dcard__face--myth { background: var(--charcoal); color: var(--cream); background-image: url('../images/brand/grain.png'); }
.dcard__face--fact { background: var(--offwhite, #FFFBF1); color: var(--charcoal); transform: rotateY(180deg); }
.dcard__tag { justify-self: start; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: var(--rust); color: var(--cream); }
.dcard__face--fact .dcard__tag { background: var(--green); color: var(--charcoal); }
.dcard__text { align-self: center; font: 800 clamp(1.6rem, 2.6vw, 2.4rem)/1.05 var(--f-display); letter-spacing: -.03em; }
.dcard__text--fact { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; font-weight: 600; letter-spacing: 0; }
.dcard__hint { font: 600 20px/1 var(--f-script); opacity: .7; }

/* ---------- concave photo ring ---------- */
.ring { background: var(--offwhite); color: var(--charcoal); padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.ring__head { position: relative; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(20px, 3vw, 40px); }
.ring__head .h-l { text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; }
.ring__hint { margin-left: auto; font: 700 26px/1 var(--f-script); transform: rotate(-4deg); }
.ring__stage { position: relative; height: clamp(320px, 46vw, 560px); perspective: 1400px; perspective-origin: 50% 50%; cursor: grab; touch-action: pan-y; user-select: none; }
.ring__stage.is-drag { cursor: grabbing; }
.ring__track { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.ring__item { position: absolute; left: 0; top: 0; transform-style: preserve-3d; backface-visibility: hidden; -webkit-backface-visibility: hidden; translate: 0 -50%; }
.ring__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; box-shadow: 0 24px 50px rgba(60, 40, 0, .2); pointer-events: none; -webkit-user-drag: none; }
.ring__item span { display: block; margin-top: 12px; text-align: center; font: 700 clamp(1.3rem, 1.8vw, 1.8rem)/1 var(--f-script); }

/* ---------- journey bridge on home ---------- */
body[data-page="home"] .journeyb__title { text-transform: uppercase; font-weight: 900; letter-spacing: -.045em; }
.journeyb__kernel { filter: drop-shadow(0 12px 14px rgba(34, 33, 17, .3)); }

/* ---------- review orbit ---------- */
.orbitx { background: var(--charcoal); color: var(--cream); overflow: hidden; padding-bottom: clamp(40px, 6vw, 80px); }
.orbitx__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.orbitx__head .h-l { text-transform: uppercase; font-weight: 900; letter-spacing: -.04em; max-width: 13ch; }
.orbitx__head p { max-width: 40ch; color: var(--muted); }
.orbitx__head .link-arrow { color: var(--yellow); }
.orbit { position: relative; height: clamp(520px, 62vw, 760px); margin-top: clamp(10px, 2vw, 30px); }
.orbit__bowl { position: absolute; left: 50%; top: 50%; width: clamp(240px, 30vw, 440px); height: auto; translate: -50% -50%; filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .55)); z-index: 50; pointer-events: none; }
.orbit__ring { position: absolute; inset: 0; }
.ocard { position: absolute; left: 50%; top: 50%; width: clamp(240px, 24vw, 320px); padding: 20px 22px; border-radius: 22px; background: var(--cream); color: var(--charcoal); display: grid; gap: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .35); will-change: transform; transition: box-shadow .4s; }
.ocard:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 3px var(--yellow); }
.ocard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ocard__flavour { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: var(--yellow); }
.ocard__score { font: 900 26px/1 var(--f-display); letter-spacing: -.03em; }
.ocard__score::after { content: '/100'; font-size: 11px; font-weight: 700; opacity: .5; margin-left: 2px; }
.ocard q { font-size: 15px; font-weight: 600; line-height: 1.45; quotes: '“' '”'; }
.ocard__who { font-size: 13px; color: var(--muted-ink); }
.ocard--empty { position: relative; left: auto; top: auto; margin: 40px auto; text-align: center; }
.orbit.is-empty { height: auto; }
.orbit.is-empty .orbit__bowl { position: relative; display: block; margin: 0 auto; left: auto; top: auto; translate: none; }
.orbit.is-static { height: auto; }
.orbit.is-static .orbit__bowl { position: relative; left: auto; top: auto; translate: none; display: block; margin: 0 auto 30px; }
.orbit.is-static .orbit__ring { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.orbit.is-static .ocard { position: relative; left: auto; top: auto; width: auto; }

/* ---------- closer & pour animation ---------- */
.closerx { position: relative; overflow: hidden; background: var(--yellow); color: var(--charcoal); padding: clamp(80px, 11vw, 150px) 0; isolation: isolate; }
.closerx.is-grabbing { cursor: grabbing; }
.closerx__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 80px); align-items: center; position: relative; z-index: 2; }
.closerx__title { font: 900 clamp(2.6rem, 6.4vw, 6.8rem)/.88 var(--f-display); letter-spacing: -.045em; text-transform: uppercase; }
.closerx__sub { margin-top: 22px; font-size: 18px; font-weight: 500; max-width: 42ch; }
.closerx__ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.closerx__photo { margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 4 / 5; }
.closerx__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.08); }
.rain__k { position: absolute; top: 0; width: 64px; height: auto; z-index: 1; pointer-events: none; filter: drop-shadow(0 8px 8px rgba(80, 60, 10, .25)); }

.closer__stage,
.foot__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.closer__stage .pour__k,
.foot__stage .pour__k { filter: drop-shadow(0 10px 12px rgba(80, 60, 10, .28)); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .proofx__grid { grid-template-columns: 1fr 1fr; }
  .proofx__grid .pcard:last-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .pour__title { font-size: clamp(2.6rem, 13.5vw, 4.4rem); margin-top: 28px; }
  .pour__note { margin: 6px 6px 0 0; font-size: 2rem; }
  .pour__foot { flex-direction: column; align-items: flex-start; }
  .pour__brand span:last-child { display: none; }
  .expand__title { font-size: clamp(3rem, 16vw, 5rem); align-content: space-around; }
  .expand__scribble { right: 20px; bottom: 20vh; }
  .expand__cap { flex-direction: column; align-items: flex-start; }
  .proofx__grid { grid-template-columns: 1fr; }
  .deckx__grid { grid-template-columns: 1fr; }
  .deck { height: 420px; }
  .closerx__grid { grid-template-columns: 1fr; }
  .closerx__photo { aspect-ratio: 4 / 3; }
  .orbit { height: 560px; }
  .ocard { width: 230px; padding: 16px; }
  .orbit__bowl { width: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .pre { display: none; }
  .pcard__in { animation: none; transition: none; }
}
.lp__media .kart { width: min(92%, 520px); }
.pour .btn--outline-ink { background: var(--yellow); }
@media (max-width: 760px) {
  .pour { padding-bottom: 104px; }
  .pour__note { margin-top: 14px; }
}

/* ==== INFINITE RIBBON STRIP ==== */
@keyframes iconiq-infinite-ribbon {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes iconiq-infinite-ribbon-reverse {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .iconiq-infinite-ribbon-track {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}

.infinite-ribbon-section {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  margin-top: clamp(-70px, -7vh, -40px);
  padding: clamp(30px, 4vh, 50px) 0;
  background: transparent;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.infinite-ribbon-container {
  position: relative;
  width: 100%;
  height: clamp(90px, 11vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.infinite-ribbon {
  width: 130vw;
  max-width: none;
  overflow: hidden;
  background: #14130A;
  color: #FDDB5E;
  padding: clamp(9px, 1.2vw, 13px) 0;
  font-size: clamp(0.95rem, 1.25vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-family: var(--f-display, "Cabinet Grotesk", sans-serif);
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(20, 19, 10, 0.28);
  transform-origin: center center;
}

.infinite-ribbon.absolute {
  position: absolute;
  top: 50%;
  left: -15vw;
  transform-origin: center center;
}

.iconiq-infinite-ribbon-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
}

.iconiq-infinite-ribbon-track span {
  display: inline-flex;
  align-items: center;
  margin-right: 2.5rem;
  user-select: none;
}