/* Chapter 2, "Catch it while it's early". A Radar alert lands (a thread going viral on Reddit),
   then docks into a chart recorder: the paper runs under a fixed pen and carries the topic's
   attention, split by who gets it (nobody, Daylight, other brands), with both brands' lanes and
   notes on the moments that explain it. Scroll is time; js/early.js drives it. */

.ea { position: relative; height: 520vh; }
.ea__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 1.8vh; padding: 96px var(--gutter) 2.2vh; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.ea-top { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.ea-top .h { font-size: clamp(34px, 3.4vw, 56px); }
.ea-phase { margin: 8px 0 0; min-height: 1.3em; font: 500 clamp(16px, 1.4vw, 20px)/1.3 var(--sans); letter-spacing: -0.015em; color: var(--grey-1); }
.ea-clock { display: grid; justify-items: end; gap: 4px; margin: 0; }
.ea-clock b { font: 600 clamp(30px, 3.4vw, 54px)/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.ea-tag { font: 500 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-2); }
.ea-face { display: inline-block; width: var(--s, 36px); height: var(--s, 36px); flex: none; }
.ea-face .agent-persona { width: 100%; height: 100%; }
.ea-dot { display: inline-grid; place-items: center; width: var(--s, 36px); height: var(--s, 36px); border-radius: 50%; flex: none; font: 600 11px var(--mono); }
@media (max-width: 760px) {
  .ea__pin { padding-top: 76px; }
  .ea-top { flex-direction: column; align-items: start; gap: 8px; }
  .ea-clock { justify-items: start; }
}

.ea-paper { position: relative; overflow: hidden; border-radius: 18px; min-height: 0; background: #fff repeating-linear-gradient(180deg, rgba(201, 166, 97, 0.1) 0 1px, transparent 1px 40px); box-shadow: 0 0 0 1px var(--hairline), 0 30px 60px -36px rgba(20, 20, 30, 0.25); }
.ea-paper::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 14%; z-index: 2; pointer-events: none; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.ea-tape { position: absolute; top: 0; bottom: 0; left: 0; width: 200%; will-change: transform; background: repeating-linear-gradient(90deg, rgba(201, 166, 97, 0.1) 0 1px, transparent 1px 40px); }
.ea-curve { position: absolute; left: 0; width: 100%; top: 14%; height: 46%; overflow: visible; }
.ea-ghost { fill: none; stroke: rgba(10, 10, 10, 0.12); stroke-width: 1.5; stroke-dasharray: 3 5; }
.ea-line { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.ea-rail, .ea-fill { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; }
.ea-rail { background: var(--hairline-strong); }
.ea-rail.is-us, .ea-fill.is-us { top: 72%; }
.ea-rail.is-them, .ea-fill.is-them { top: 87%; }
.ea-fill { transform-origin: 0 50%; transform: scaleX(0); }
.ea-fill.is-us { background: var(--gold); height: 3px; }
.ea-fill.is-them { background: #a9a49a; }
.ea-step { position: absolute; transform: translate(-50%, -50%) scale(0.85); opacity: 0; transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out); }
.ea-step.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ea-step i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #a9a49a; box-shadow: 0 0 0 4px #fff; }
.ea-step small { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font-size: 11px; color: var(--grey-2); white-space: nowrap; }
.ea-stamp { position: absolute; transform: translate(14px, -50%) rotate(-3deg) scale(1.3); padding: 6px 12px; border: 2px solid currentColor; border-radius: 8px; font: 700 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 160ms var(--ease-out), transform 240ms var(--ease-out); background: #fff; }
.ea-stamp.is-on { opacity: 0.95; transform: translate(14px, -50%) rotate(-3deg) scale(1); }
.ea-stamp em { display: block; font-style: normal; font-weight: 500; font-size: 11px; text-transform: none; letter-spacing: 0; }
.ea-stamp.is-us { color: var(--gold-deep); background: #fdf8ec; }
.ea-stamp.is-them { color: #6b6b6b; }
.ea-stamp.is-crowd { color: #b4442c; transform: translate(-50%, -50%) rotate(-3deg) scale(1.3); }
.ea-stamp.is-crowd.is-on { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
.ea-drop { position: absolute; width: 0; border-left: 1.5px dashed; opacity: 0; transition: opacity 220ms var(--ease-out); }
.ea-drop.is-on { opacity: 0.7; }
.ea-drop.is-us { border-color: var(--gold); }
.ea-drop.is-them { border-color: #a9a49a; }
#ea-marks .ea-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0; transition: opacity 220ms var(--ease-out); }
#ea-marks .ea-dot.is-on { opacity: 1; }
#ea-marks .ea-dot.is-us { background: var(--gold); box-shadow: 0 0 0 5px rgba(201, 166, 97, 0.25); }
#ea-marks .ea-dot.is-them { background: #a9a49a; box-shadow: 0 0 0 4px #fff; }
.ea-time { position: absolute; bottom: 8px; transform: translateX(-50%); font: 500 11px var(--mono); color: var(--grey-2); }
.ea-keys { position: absolute; inset: 0 auto 0 0; width: 230px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, #fff 62%, rgba(255, 255, 255, 0)); }
.ea-key { position: absolute; left: 18px; margin: 0; display: flex; align-items: center; gap: 10px; transform: translateY(-50%); }
.ea-key.is-curve { top: 14px; transform: none; display: grid; gap: 6px; }
.ea-key.is-us { top: 72%; }
.ea-key.is-them { top: 87%; }
.ea-key b { display: block; font: 600 14px var(--sans); }
.ea-key small { font-size: 12px; color: var(--grey-2); }
.ea-pen { position: absolute; top: 0; bottom: 0; left: 62%; width: 0; z-index: 3; border-left: 1px dashed rgba(10, 10, 10, 0.22); }
.ea-pen b { position: absolute; left: -7px; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.08); will-change: transform; }
.ea-dock { position: absolute; top: 14px; right: calc(16px + min(360px, 34%) + 52px); width: min(210px, 17%); height: 64px; z-index: 4; }
.ea-veil { position: absolute; inset: 0; z-index: 5; background: rgba(250, 249, 246, 0.72); backdrop-filter: blur(3px); pointer-events: none; }

.ea-note { margin: 0; text-align: right; }
@media (prefers-reduced-motion: reduce) { .ea-ping i { animation: none; } }
@media (max-width: 760px) {
  .ea-keys { width: 120px; }
  .ea-key small, .ea-key.is-curve { display: none; }
  .ea-key b { font-size: 12px; }
  .ea-step small { display: none; }
  .ea-pen { left: 72%; }
  .ea-dock { width: 140px; height: 48px; top: 10px; right: 10px; }
  .ea-res { font-size: 10px; max-width: 90px; }
}
/* Once a brand is live, its result stays by its name while the tape runs on. */
.ea-res { display: block; margin-top: 4px; font: 600 11px var(--mono); font-style: normal; color: #6b6b6b; opacity: 0; transition: opacity 220ms var(--ease-out); }
.ea-res.is-us { color: var(--gold-deep); }
.ea-res.is-on { opacity: 1; }

/* Round 2 of E11: who gets the attention, the views it turns into, and the moments that explain it. */
.ea-body { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; min-height: 0; }
.ea-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; }
.ea-stats > div { padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--hairline); }
.ea-stats dt { margin-bottom: 4px; }
.ea-stats dd { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.ea-stats b { font: 650 clamp(22px, 2vw, 30px)/1 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.ea-stats small { font: 500 11px var(--mono); color: var(--grey-2); }
.ea-stats .is-us b { color: var(--gold-deep); }
.ea-stats .is-them b { color: #6b6b6b; }
.ea-meter { flex: 1; height: 6px; border-radius: 3px; background: var(--canvas-deep); overflow: hidden; align-self: center; }
.ea-meter i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }
.is-us .ea-meter i { background: var(--gold); }
.ea-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--grey-2); }
.ea-legend i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; }
.ea-legend i:first-child { margin-left: 0; }
.ea-legend .is-us { background: var(--gold); }
.ea-legend .is-them { background: #c9c4ba; }
.ea-legend .is-free { background: repeating-linear-gradient(135deg, #dcd8cf 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1px #dcd8cf; }
.ea-us { fill: rgba(201, 166, 97, 0.75); }
.ea-them { fill: #d4cfc5; }
.ea-free { fill: url(#ea-hatch); }
.ea-read { position: absolute; left: 12px; top: 0; padding: 6px 10px; border-radius: 10px; background: var(--ink); color: var(--canvas); font: 500 11px/1.35 var(--mono); white-space: nowrap; will-change: transform; }
.ea-read b { color: var(--gold); font-weight: 600; }
/* Moments on the paper: a dot on the curve, a leader up, a note. */
.ea-moment { position: absolute; width: 0; opacity: 0; transition: opacity 260ms var(--ease-out); }
.ea-moment.is-on { opacity: 1; }
.ea-moment::before { content: ""; position: absolute; left: -4px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px #fff; }
.ea-moment > i { position: absolute; left: 0; bottom: 0; top: 0; border-left: 1px solid rgba(10, 10, 10, 0.25); }
.ea-moment p { position: absolute; left: -8px; bottom: 100%; margin: 0 0 6px; width: 190px; padding: 7px 10px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--hairline-strong), 0 8px 18px -10px rgba(20, 20, 30, 0.25); font-size: 12px; line-height: 1.35; color: var(--grey-1); }
.ea-moment p b { display: block; margin-bottom: 2px; font: 500 10px var(--mono); color: var(--grey-2); }
.ea-moment.is-us::before { background: var(--gold); }
.ea-moment.is-us p { box-shadow: 0 0 0 1px rgba(201, 166, 97, 0.6), 0 8px 18px -10px rgba(20, 20, 30, 0.25); }
.ea-moment.is-them::before { background: #a9a49a; }
.ea-moment.is-bad::before { background: #b4442c; }
.ea-moment.is-bad p b { color: #b4442c; }
@media (max-width: 760px) {
  .ea-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .ea-stats > div { padding: 6px 10px; }
  .ea-stats b { font-size: 18px; }
  .ea-legend { display: none; }
  .ea-moment p { width: 130px; font-size: 11px; }
  .ea-read { display: none; }
}

.ea-moment.is-down::before { bottom: auto; top: -4px; }
.ea-moment.is-down p { bottom: auto; top: 100%; margin: 6px 0 0; }

/* Short screens: the lanes sit close, so the keys drop their second line. */
@media (max-height: 780px) and (min-width: 761px) {
  .ea-key small { display: none; }
  .ea-stats > div { padding: 6px 12px; }
  .ea-stats b { font-size: 22px; }
  .ea-top .h { font-size: clamp(30px, 3vw, 44px); }
}

/* Phone: only the latest note keeps its text; the rest stay as dots on the curve. */
@media (max-width: 760px) {
  .ea-moment:not(.is-now) p { display: none; }
  .ea-moment p { width: 150px; }
}

/* The opening: a Radar alert as big as the chart, in one panel. Header with the source; left, the
   post going viral; right, its traction (numbers, the upvote curve, comments arriving). Scrolling
   on, the post docks into the paper's corner and the upvote curve flies into the chart, where the
   topic's own curve takes over; the panel fades around them (--card, set on the alert). */
.ea-alert { position: absolute; inset: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto minmax(0, 1fr); gap: 0; pointer-events: none; }
.ea-alert::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 24px; opacity: var(--card, 1);
  background: radial-gradient(120% 60% at 0% 0%, rgba(255, 90, 60, 0.07), transparent 60%), radial-gradient(80% 50% at 100% 0%, rgba(201, 166, 97, 0.1), transparent 60%), #fff;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 50px 90px -40px rgba(20, 20, 30, 0.38), 0 18px 36px -18px rgba(20, 20, 30, 0.16); }
.ea-alert > * { transition: opacity 480ms var(--ease-out), translate 480ms var(--ease-out); }
.ea-alert:not(.is-in) > *, .ea-alert:not(.is-in)::before { opacity: 0; translate: 0 14px; }
.ea-alert::before { transition: opacity 480ms var(--ease-out), translate 480ms var(--ease-out); }
.ea-alert > :nth-child(2) { transition-delay: 90ms; }
.ea-alert > :nth-child(3) { transition-delay: 180ms; }

.ea-alert__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); }
.ea-radar { position: relative; display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: #fff0ec; }
.ea-radar b { width: 10px; height: 10px; border-radius: 50%; background: #ff5a3c; box-shadow: 0 0 0 3px rgba(255, 90, 60, 0.18); }
.ea-radar i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255, 90, 60, 0.5); animation: ea-ring 2.2s cubic-bezier(0.22, 1, 0.36, 1) infinite; }
.ea-radar i + i { animation-delay: 1.1s; }
@keyframes ea-ring { from { transform: scale(0.45); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ea-radar i { animation: none; opacity: 0.5; } }
.ea-alert__h { display: grid; line-height: 1.25; }
.ea-alert__h b { font: 650 15px var(--sans); letter-spacing: -0.01em; }
.ea-alert__h span { font-size: 13px; color: var(--grey-2); }
.ea-chips { display: flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
.ea-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--canvas-deep); font: 500 12px var(--sans); color: var(--grey-1); white-space: nowrap; }
.ea-chip i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: 700 8px var(--sans); font-style: normal; color: #fff; }
.ea-chip i.is-reddit { background: #ff4500; }
.ea-chip.is-gold { background: rgba(201, 166, 97, 0.16); color: var(--gold-deep); }
.ea-alert__t { margin-left: auto; padding: 5px 10px; border-radius: 999px; background: #fff0ec; color: #b4442c; font-size: 11px; }

.ea-post, .ea-trac { position: relative; min-height: 0; box-sizing: border-box; }
.ea-post { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 10px; margin: 16px 0 16px 16px; padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 12px 28px -18px rgba(20, 20, 30, 0.25); transform-origin: 0 0; will-change: transform; }
.ea-post__by { display: flex; align-items: center; gap: 10px; margin: 0; }
.ea-post__by b { display: block; font: 600 14px var(--sans); }
.ea-post__by small { font-size: 12px; color: var(--grey-2); }
.ea-post__sub { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ff4500; color: #fff; font: 700 13px var(--sans); flex: none; }
.ea-hot { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: #fdebe6; color: #b4442c; font: 600 12px var(--sans); white-space: nowrap; }
.ea-post h3 { margin: 0; font: 600 clamp(17px, 1.45vw, 22px)/1.22 var(--sans); letter-spacing: -0.025em; }
.ea-post__img { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; margin: 0; min-height: 0; }
.ea-post__img img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 12px; }
.ea-post__acts { display: flex; gap: 8px; margin: 0; }
.ea-post__acts span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--canvas-deep); font-size: 13px; color: var(--grey-1); }
.ea-post__acts svg { width: 15px; height: 15px; }
.ea-post__acts b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ea-post__acts .is-up { background: #fdebe6; color: #b4442c; }

.ea-trac { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px; padding: 16px 20px 16px 24px; }
.ea-trac__n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-radius: 16px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline); }
.ea-trac__n > div { padding: 10px 14px; }
.ea-trac__n > div + div { border-left: 1px solid var(--hairline); }
.ea-trac__n dd { margin: 6px 0 0; font: 650 clamp(22px, 2vw, 30px)/1 var(--sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; color: #c2452a; }
.ea-trac__n dd.is-zero { color: var(--gold-deep); }
.ea-trac__chart { position: relative; min-height: 0; transform-origin: 0 0; will-change: transform;
  background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgba(10, 10, 10, 0.06) calc(25% - 1px) 25%) 0 22px / 100% calc(100% - 22px) no-repeat; }
.ea-trac__chart .ea-tag { position: absolute; left: 0; top: 0; }
.ea-trac__now { position: absolute; right: 0; top: 0; padding: 3px 8px; border-radius: 6px; background: #c2452a; color: #fff; font-size: 11px; }
.ea-trac__chart svg { position: absolute; inset: 22px 0 0; width: 100%; height: calc(100% - 22px); overflow: visible; }
.ea-tdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #e0533a; box-shadow: 0 0 0 5px rgba(224, 83, 58, 0.18); }
.ea-tline { fill: none; stroke: #e0533a; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.ea-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-height: 112px; align-content: end; }
.ea-feed li { display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 8px; border-radius: 14px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--hairline); font-size: 13px; color: var(--grey-1); animation: ea-in 320ms var(--ease-out) both; }
.ea-feed li i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font: 600 10px var(--sans); font-style: normal; flex: none; }
.ea-feed li b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.ea-feed li .ea-face { --s: 24px; }
.ea-feed li.is-ours { background: rgba(201, 166, 97, 0.12); box-shadow: inset 0 0 0 1px rgba(201, 166, 97, 0.45); }
@keyframes ea-in { from { opacity: 0; transform: translateY(6px); } }
@media (max-height: 780px) and (min-width: 761px) {
  .ea-feed { min-height: 0; } .ea-feed li:nth-child(n+3) { display: none; }
  .ea-post h3 { font-size: 16px; }
  .ea-chips .ea-chip:nth-child(2) { display: none; }
}
@media (max-width: 1100px) { .ea-chips { display: none; } }
@media (max-width: 760px) {
  .ea-alert { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .ea-alert__bar { padding: 10px 12px; }
  .ea-alert__h span { display: none; }
  .ea-post { margin: 10px 10px 0; padding: 12px; gap: 8px; }
  .ea-post__img { height: 110px; }
  .ea-trac { padding: 10px 12px 12px; }
  .ea-trac__n { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-trac__n > div:nth-child(3) { border-left: 0; }
  .ea-feed { display: none; }
  .ea-post__by small, .ea-hot { display: none; }
}

/* Daylight's own post, made from the thread: it takes the paper's corner once Chip briefs the team,
   moves from brief to cut to approval to live, then counts its traction. */
.ea-ours { position: absolute; top: 14px; right: 16px; z-index: 4; width: min(360px, 34%); padding: 10px 12px 12px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--hairline), 0 24px 44px -24px rgba(20, 20, 30, 0.35); opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out); }
.ea-ours.is-on { opacity: 1; transform: none; }
.ea-ours.is-live { box-shadow: 0 0 0 1.5px var(--gold), 0 24px 44px -24px rgba(201, 166, 97, 0.55); }
.ea-ours__src { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 11px; color: var(--grey-2); }
.ea-ours__src i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #ff4500; color: #fff; font: 700 8px var(--sans); font-style: normal; }
.ea-ours__row { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.ea-ours__vid { position: relative; margin: 0; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #12110f; }
.ea-ours__slot { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background: var(--canvas); box-shadow: inset 0 0 0 1.5px var(--hairline); color: var(--grey-2); font-size: 10px;
  background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(10, 10, 10, 0.04) 7px 8px); }
.ea-ours__strip { position: absolute; inset: 0; display: flex; opacity: 0; will-change: transform; }
.ea-ours__strip img { flex: none; width: 100%; height: 100%; object-fit: cover; }
.ea-ours__ver { position: absolute; left: 6px; bottom: 9px; display: flex; gap: 3px; opacity: 0; transition: opacity 200ms var(--ease-out); }
.ea-ours__ver i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: background-color 160ms var(--ease-out); }
.ea-ours__ver i.is-on { background: #fff; }
.ea-ours__ver.is-best i.is-on { background: var(--gold); box-shadow: 0 0 0 2px rgba(201, 166, 97, 0.35); }
.ea-ours:not([data-stage="cut"]):not([data-stage="wait"]) .ea-ours__play { opacity: 0; }
.ea-ours__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); color: var(--ink); }
.ea-ours__play svg { width: 14px; height: 14px; margin-left: 2px; }
.ea-ours__dur { position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; }
.ea-ours__draft { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.9); color: var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.ea-ours.is-live .ea-ours__draft { display: none; }
.ea-ours__info { display: grid; align-content: start; gap: 6px; min-width: 0; }
.ea-ours__by { display: flex; align-items: center; gap: 6px; margin: 0; }
.ea-ours__by b { font: 600 13px var(--sans); }
.ea-ours__by .mono { margin-left: auto; font-size: 10px; color: var(--grey-2); white-space: nowrap; }
.ea-ours__logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 11px var(--sans); }
.ea-ours__cap { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--grey-1); }
.ea-ours__cap { min-height: 2.7em; }
.ea-ours__cap span { color: #3a6fd1; }
.ea-caret { display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--ink); }
.ea-ours__state { display: flex; align-items: center; gap: 6px; margin: 0; padding: 5px 8px; border-radius: 10px; background: var(--canvas); font-size: 11.5px; color: var(--grey-1); }
.ea-ours__state .ea-face { --s: 18px; }
.ea-ours__state .ea-dot { font-size: 6.5px; }
.ea-ours__state > span:not(.ea-face):not(.ea-dot):not(.ea-ok) { min-width: 0; }
.ea-ours__state.is-wait { background: rgba(201, 166, 97, 0.16); color: var(--gold-deep); }
.ea-ok { margin-left: auto; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 10.5px var(--sans); white-space: nowrap; transition: transform 160ms var(--ease-out), background-color 200ms var(--ease-out); }
.ea-ok.is-pressed { background: #2f7d52; transform: scale(0.96); }
.ea-ours__state.is-live { background: #e8f4ec; color: #2f7d52; }
.ea-ours__state.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2f7d52; box-shadow: 0 0 0 3px rgba(47, 125, 82, 0.2); }
.ea-ours__n { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 2px 0 0; }
.ea-ours__n dt { font: 500 9.5px var(--mono); color: var(--grey-2); text-transform: uppercase; letter-spacing: 0.04em; }
.ea-ours__n dd { margin: 2px 0 0; font: 650 15px var(--sans); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ea-ours:not(.is-live) .ea-ours__n dd { color: #c9c4ba; }
@media (max-height: 780px) and (min-width: 761px) {
  .ea-ours__row { grid-template-columns: 70px minmax(0, 1fr); }
  .ea-ours__cap { font-size: 11.5px; line-height: 1.3; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
@media (max-width: 760px) {
  .ea-ours { top: 8px; right: 8px; width: 58%; padding: 8px; }
  .ea-ours__row { grid-template-columns: 48px minmax(0, 1fr); gap: 8px; }
  .ea-ours__cap, .ea-ours__by .mono, .ea-ours__src { display: none; }
  .ea-ours__n { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The making: a scan down the docked thread, a wire to the card, and the pieces in flight. Every
   position is set per frame from the scroll; nothing here runs on its own clock. */
.ea-synth { position: absolute; inset: 0; z-index: 11; pointer-events: none; display: none; }
.ea.is-making .ea-synth { display: block; }
.ea-scan, .ea-wire, .ea-bit { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.ea-scan { overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1.5px var(--gold); }
.ea-scan::after { content: ""; position: absolute; left: 0; right: 0; top: var(--y, 0%); height: 22%; background: linear-gradient(180deg, rgba(201, 166, 97, 0), rgba(201, 166, 97, 0.32) 70%, var(--gold) 100%); }
.ea-wire { height: 0; }
.ea-wire::before { content: ""; position: absolute; left: 0; right: 8px; top: -1px; height: 2px; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 12px) var(--run, 0) 0 / 12px 2px; }
.ea-wire::after { content: ""; position: absolute; right: 0; top: -5px; border: 5px solid transparent; border-left: 8px solid var(--gold); border-right: 0; }
.ea-bit { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1.5px var(--gold), 0 10px 22px -12px rgba(20, 20, 30, 0.45); font: 500 12px var(--sans); color: var(--ink); white-space: nowrap; transform-origin: 50% 50%; }
#ea-bit-t { padding-left: 10px; }
.ea-bit i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 600 8.5px var(--sans); font-style: normal; }
.ea-bit.is-img { padding: 0; overflow: hidden; border-radius: 12px; background: #12110f; }
.ea-bit.is-img img { width: 100%; height: 100%; object-fit: cover; }

/* The making in focus (early-ours.js): the card rises over the dimmed chart, its transform set by
   the scroll, so it carries no transition of its own then. */
.ea.is-focus .ea-ours { z-index: 9; transform-origin: 0 0; transition: opacity 320ms var(--ease-out), box-shadow 320ms var(--ease-out); box-shadow: 0 0 0 1px var(--hairline), 0 40px 80px -40px rgba(20, 20, 30, 0.45); }
.ea.is-focus .ea-veil { backdrop-filter: blur(6px); }