/* journey/cards — the six windows' interiors (see cards/index.js for the
   contract and the one-building/six-worlds split).

   Loaded after site.css. Everything here scopes under .j-pop-rich or a
   card's own namespace (.ag- Arca, .ac- ArtCompute, .rp- 2RP, .ad- ADOS,
   .hm- Hivemind, .dc- Discord) so a node without a builder renders exactly
   yesterday's popover. The shell frame itself — panel, hairline, radius,
   shell lamp, filament — is site.css's and is deliberately not restated here. */

/* ---- shell extension ------------------------------------------------- */

/* Above the side rail (site.css z 4) — at phone widths the 86vw card runs
   under the rail's menu button, which read as the menu floating ON the
   card (Hannah, 2026-08-17, again 2026-08-18 on mobile). The FIRST fix
   set z-index on .j-pop itself, which is inert: the popover lives inside
   .j-hotspots, a fixed z-index:1 stacking context, so against the rail
   only the CONTAINER's index counts. Raising the layer is the real fix.
   Still under the menu scrim/panel (6/7), so an OPEN menu covers an open
   card, which is the right order; the container is pointer-events:none,
   so nothing new intercepts the rail's own hover. */
.j-hotspots { z-index: 5; }

.j-pop.j-pop-rich {
  max-width: min(21.5rem, 86vw);
  width: min(21.5rem, 86vw); /* media wants a stable measure, not max-content */
  /* THE MAT (Hannah, 2026-08-18: "a small border region to make them look
     consistent") — the house panel shows as a slim, even frame around every
     stage: one window treatment, six worlds behind it. */
  padding: 7px;
}

/* THE MYCELIAL BACKPLANE (2026-08-19) — nothing is painted ON the project.
   One loose network lives behind the opaque stage, extends beyond its box,
   disappears underneath the content, and re-emerges at unrelated edges. The
   card therefore stays wholly itself; the surrounding world is what grows.

   Per-node transforms are deterministic rather than freshly random on every
   hover: each initiative gets a different accidental-looking crop without a
   line jumping position when the visitor returns to it. */
.j-pop-frame {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
}

/* Oversized on purpose. The two-layer mask subtracts the ENTIRE card box —
   stage, 7px mat, and border — from the network. The
   lines can approach and depart in the surrounding space, but no strand can
   paint across the edge. They meet the silhouette exactly, so the visible
   ends read as one network continuing underneath rather than loose decoration. */
.j-pop-frame::before {
  content: "";
  position: absolute;
  inset: -20px -24px;
  z-index: 0;
  box-sizing: border-box;
  padding: 12px 16px;
  pointer-events: none;
  background-image: url('../../assets/cards/mycelial-underlay.svg');
  background-position:
    calc(50% + var(--myc-x, 0px))
    calc(50% + var(--myc-y, 0px));
  background-size: var(--myc-w, 100%) var(--myc-h, 100%);
  background-repeat: no-repeat;
  opacity: 0.6;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Six stable crops of the same underground organism: related, never cloned. */
.j-pop[data-node="arca"]       { --myc-x: -6px; --myc-y: 2px;  --myc-w: 104%; --myc-h: 98%; }
.j-pop[data-node="artcompute"] { --myc-x: 6px;  --myc-y: -3px; --myc-w: 98%;  --myc-h: 106%; }
.j-pop[data-node="tworp"]      { --myc-x: -2px; --myc-y: 5px;  --myc-w: 108%; --myc-h: 102%; }
.j-pop[data-node="ados"]       { --myc-x: 5px;  --myc-y: 2px;  --myc-w: 102%; --myc-h: 108%; }
.j-pop[data-node="hivemind"]   { --myc-x: -7px; --myc-y: 0px;  --myc-w: 106%; --myc-h: 96%; }
.j-pop[data-node="discord"]    { --myc-x: 3px;  --myc-y: -5px; --myc-w: 96%;  --myc-h: 104%; }

/* A light-only wake: the network never moves after it is placed, which keeps
   the random crop calm and leaves popover measurement completely stable. */
@keyframes j-mycelium-wake {
  0%   { opacity: 0; }
  48%  { opacity: 0.72; }
  100% { opacity: 0.6; }
}
.j-pop.j-pop-enter .j-pop-frame::before {
  animation: j-mycelium-wake 0.62s ease-out both;
}

/* THE STAGE IS THE WHOLE CARD (Hannah, 2026-08-18: "we shouldn't have the
   bottom part … explain everything in the main part") — the house block
   below is hidden on rich cards and each stage carries its own name, copy
   and door in its project's voice. The elements stay in the DOM: the short
   line is still the chip's aria-describedby text, so what a screen reader
   hears is unchanged. */
.j-pop-rich .j-pop-t,
.j-pop-rich .j-pop-s,
.j-pop-rich .j-pop-link { display: none; }

.j-pop-stage {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

/* THE DOOR SHOWS WHEN YOU REACH FOR IT (Hannah, 2026-08-18: "for all we
   could have a CTA show on hover") — every stage's link starts quiet and
   rises in when the pointer enters the card, when it is pinned, or when
   focus lands inside (touch and keyboard see what mouse users see). */
.card-cta {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  text-decoration: none;
}
.j-pop:hover .card-cta,
.j-pop:focus-within .card-cta,
.j-pop.j-pop-pinned .card-cta {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ON TOUCH THE DOOR IS ALWAYS OPEN (2026-08-19): a finger has no hover,
   and pinning is the second tap — so the old reveal made the CTA cost two
   taps on every phone. Under (hover: none) the door shows the moment its
   card opens: the transient first-tap reveal IS the open, not a hover to
   be earned. (The closed popover is visibility:hidden, so this leaks
   nothing.) */
@media (hover: none) {
  .j-pop .card-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Keep the contact filament above stage media. */
.j-pop.j-pop-rich::before { z-index: 2; }

/* The stage joins the entry choreography as the shell lamps on. */
.j-pop.j-pop-enter .j-pop-stage { animation: j-pop-word 0.34s ease both; animation-delay: 0.06s; }

@media (prefers-reduced-motion: reduce) {
  .j-pop-stage, .j-pop-stage * { animation: none !important; transition: none !important; }
  .j-pop-frame::before { animation: none !important; }
}

/* ---- arca — arcagidan.com's hero, miniaturized ------------------------ */
/* Its own faces, self-hosted subsets (assets/cards/PROVENANCE.md). */
@font-face {
  font-family: 'Eubergine';
  src: url('../../assets/cards/arca/eubergine-sub.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Geosans Light';
  src: url('../../assets/cards/arca/geosans-sub.woff2') format('woff2');
  font-display: swap;
}

/* The whole approach is the site's own hero (Hannah, 2026-08-17: "copy the
   whole approach from the website"): four full-color posters, one ARCA GIDAN
   line across them, THE/PRIZE eyebrows, and a spotlight-on-hover — the
   non-hovered panels drop into darkness (their duration-300 crossfade), the
   hovered syllable goes #7b0b0b at scale 1.1 (their duration-500). */

.j-pop-stage.ag { background: #1a1a1a; }   /* their dark-section ink */

.ag-panels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* their hero grid */
  height: 196px;                           /* full stage: the info line overlays */
}
.ag-panel { position: relative; margin: 0; overflow: hidden; }
.ag-panel img,
.ag-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* REST IS VIBRANT, exactly as the site's hero is — dimming is what
     HOVER does to everyone else (their bg-black/70-style drop) */
  transition: filter 0.3s ease;            /* their duration-300 */
}
/* the figure's video panel surfaces only once frames are rendering —
   hover-streamed from the site itself, the poster beneath is the fallback */
.ag-video { opacity: 0; transition: opacity 0.3s ease; }
.ag-video.playing { opacity: 1; }
/* the spotlit poster DRIFTS while it holds the light — guaranteed motion
   under the pointer even while (or if) the figure's video never arrives
   (2026-08-18: arcagidan.com's host began 403ing cross-site media; the
   video layer stays wired for the day it opens up or the files land in
   assets/) */
.ag .ag-panel.lit img { animation: ag-drift 7s ease-in-out infinite alternate; }
@keyframes ag-drift {
  from { transform: scale(1.05) translateY(0); }
  to   { transform: scale(1.14) translateY(-2.5%); }
}
.ag.ag-hovering .ag-panel:not(.lit) img,
.ag.ag-hovering .ag-panel:not(.lit) .ag-video { filter: brightness(0.28) saturate(0.5); }

.ag-word {
  position: absolute;
  inset: 0 0 22px 0;                       /* true optical centre: half the
                                              info scrim's height, no more */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  pointer-events: none;
  color: #f5f0eb;                          /* their cream */
  /* heavier than the site needs at 160px: at card scale the letters cross
     bright artwork, so the halo does the legibility work */
  text-shadow:
    0 1px 14px rgba(0, 0, 0, 0.9),
    0 0 6px rgba(0, 0, 0, 0.85),
    0 0 2px rgba(0, 0, 0, 1);
}
.ag-eyebrow {
  font-family: 'Eubergine', 'Didot', Georgia, serif;
  font-size: 0.5rem;
  letter-spacing: 0.5em;                   /* their tracking-[0.5em] */
  padding-left: 0.5em;                     /* their trailing-tracking comp */
  transition: opacity 0.3s ease;
}
/* their "The"/"Prize" step aside while a figure holds the light */
.ag.ag-hovering .ag-eyebrow { opacity: 0; }

.ag-title {
  font-family: 'Eubergine', 'Didot', Georgia, serif;  /* their h1 face */
  font-size: 2.05rem;
  letter-spacing: 0.12em;                  /* their tracking-[0.12em] */
  line-height: 0.9;                        /* their lineHeight .9 */
  white-space: nowrap;
}
.ag-syl {
  pointer-events: auto;                    /* the syllables ARE the hover zones */
  transition: color 0.5s ease, transform 0.5s ease;   /* their duration-500 */
  display: inline-block;
}
.ag-syl:nth-child(3) { margin-left: 0.3em; }  /* their w-[0.3em] word gap */
.ag-syl.lit { color: #7b0b0b; transform: scale(1.1); }  /* their hover state */

/* what-it-is over the record, IN the art (Hannah, 2026-08-17/18) — two
   stacked microlines on one soft scrim, the 2RP cover's grammar */
.ag-info {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.15rem 0.5rem 0.4rem;
  font-family: 'Geosans Light', 'Inter', sans-serif;  /* their body face */
  text-align: center;
  /* deep enough that the lines read over ANY of the four artworks
     (Hannah, 2026-08-18: more readable) — the art still glows through
     the gradient's upper half */
  background: linear-gradient(to top,
    rgba(8, 8, 8, 0.92), rgba(8, 8, 8, 0.55) 55%, rgba(8, 8, 8, 0));
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.9);
}
.ag-desc {
  margin: 0 0 2px;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: #fff;                             /* the descriptor leads */
}
.ag-stats {
  margin: 0;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: rgba(250, 246, 240, 0.88);        /* the record follows, quieter
                                              but never squinted at */
}

/* the door — their cream on ink, hairline plaque, top-right */
.ag-cta {
  position: absolute;
  top: 8px; right: 8px;
  padding: 3px 7px;
  font-family: 'Geosans Light', 'Inter', sans-serif;
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  color: #f5f0eb;
  background: rgba(26, 26, 26, 0.72);
  border: 1px solid rgba(245, 240, 235, 0.25);
}
.ag-cta:is(:hover, :focus-visible) { border-color: rgba(245, 240, 235, 0.6); }

/* ---- entry choreography (Hannah, 2026-08-17: "make sure every card has a
   nice little entry animation") ----------------------------------------
   Each stage's internals arrive in that card's own vocabulary, keyed to the
   shell's `.j-pop-enter` window (0.7s, ui.js POP_ENTER_MS) so the lamp,
   the filament, and the interior land as one gesture. The global REDUCE
   kill-switch above silences all of it. */
@keyframes card-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes card-fade { from { opacity: 0; } to { opacity: 1; } }

/* arca — the site's own fade-in-up, panel by panel, wordmark last */
.j-pop-enter .ag-panel { animation: card-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }
.j-pop-enter .ag-panel:nth-child(2) { animation-delay: 0.07s; }
.j-pop-enter .ag-panel:nth-child(3) { animation-delay: 0.14s; }
.j-pop-enter .ag-panel:nth-child(4) { animation-delay: 0.21s; }
.j-pop-enter .ag-word  { animation: card-fade 0.4s ease both; animation-delay: 0.3s; }
.j-pop-enter .ag-info  { animation: card-fade 0.4s ease both; animation-delay: 0.38s; }

/* artcompute — a terminal painting itself in, band by band, with the same
   steps() flicker the house link-strike uses */
.j-pop-enter .ac-header { animation: card-fade 0.24s steps(2, end) both; }
.j-pop-enter .ac-grid   { animation: card-fade 0.3s steps(3, end) both; animation-delay: 0.12s; }
.j-pop-enter .ac-badges { animation: card-fade 0.3s steps(3, end) both; animation-delay: 0.26s; }
.j-pop-enter .ac-ledger { animation: card-fade 0.3s steps(3, end) both; animation-delay: 0.4s; }

/* ados — the window fades up, then the centred identity stack rises */
.j-pop-enter .ad-media { animation: card-fade 0.5s ease both; }
.j-pop-enter .ad-word  { animation: card-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.15s; }

/* tworp — the cover fades, the masthead stamps down like a printed cover */
@keyframes rp-stamp { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
.j-pop-enter .rp-cover { animation: card-fade 0.5s ease both; }
.j-pop-enter .rp-head  { animation: rp-stamp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: 0.12s; }
.j-pop-enter .rp-soon  { animation: card-fade 0.4s ease both; animation-delay: 0.34s; }

/* hivemind — the console lamp comes up (the typing itself is the real
   entrance, started by activate()), the stat footer after */
.j-pop-enter .hm-console { animation: card-fade 0.35s ease both; animation-delay: 0.05s; }
.j-pop-enter .hm-foot    { animation: card-fade 0.4s ease both; animation-delay: 0.25s; }

/* discord — header dot first, the topic rises, dots last */
.j-pop-enter .dc-head { animation: card-fade 0.3s ease both; }
.j-pop-enter .dc-body { animation: card-fade 0.4s ease both; animation-delay: 0.12s; }
.j-pop-enter .dc-dots { animation: card-fade 0.35s ease both; animation-delay: 0.3s; }

/* ---- exit choreography (Hannah, 2026-08-18: "a nice exit animation for
   when we dehover") ----------------------------------------------------
   The mirror of the entry, quicker and quieter — the interior settles a
   breath before the panel goes, so the card exhales instead of cutting.
   ui.js holds `.open` through POP_EXIT_MS (230ms) while this plays; a
   pointer returning mid-exit cancels it and the panel never blinks.
   Durations stay inside the window so nothing is caught mid-move. */
@keyframes card-settle {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(5px); }
}
/* The shell itself uses site.css's shared j-detail-depart gesture; only the
   rich interior adds this quiet settle, so its own media can finish in its
   own visual language without moving the world-anchored vessel. */
.j-pop-exit .j-pop-stage { animation: card-settle 0.2s ease-in both; }
.j-pop-exit .j-pop-t,
.j-pop-exit .j-pop-s   { animation: card-fade 0.16s ease-in reverse both; }
.j-pop-exit .j-pop-link { animation: card-fade 0.12s ease-in reverse both; }

/* ---- artcompute — artcompute.org's terminal ledger, miniaturized ----- */
/* Its own language: a hard-edged monospace terminal under scanlines. System
   mono matches their JetBrains Mono at card scale, so no webfont is loaded.
   Colors verified from its live CSS/bundle 2026-08-17:
     #0a0a0a                 their ground
     #c8c8c8                 their body text
     #39ff14                 neon green (primary accent)
     #a78bfa                 violet (secondary)
     #38bdf8                 sky (tertiary)
     rgba(255,255,255,0.08)  their hairline border
   No border-radius anywhere in the stage: their aesthetic is square. */

.j-pop-stage.ac {
  background: #0a0a0a;                                              /* their ground */
  color: #c8c8c8;                                                   /* their body text */
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;    /* their JetBrains Mono */
}

/* Their scanlines overlay, exact gradient, above content, inert. */
.j-pop-stage.ac::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 4px);
  pointer-events: none;
}

/* ---- band 1: header ---- */
.ac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem 0.6rem;
}
.ac-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;              /* their wide micro-label */
  color: rgba(255, 255, 255, 0.5);
}
.ac-dot {
  width: 6px; height: 6px;
  background: #39ff14;                 /* steady; no pulse = no fake liveness */
}

/* ---- band 2: stat grid (their gap-px hairline grid) ---- */
.ac-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;                            /* hairline shows through */
  background: rgba(255, 255, 255, 0.08);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ac-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.7rem 0.85rem 0.65rem;
  background: #0a0a0a;
}
.ac-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(57, 255, 20, 0.4);       /* green micro-label, #39ff14 at 40% */
}
.ac-value {
  font-size: 20px;
  line-height: 1.1;
  color: rgba(255, 255, 255, 0.85);    /* white/85 */
}
.ac-sub {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);     /* white/40 */
}

/* ---- band 3a: grant badges (their badge pill, translated) ---- */
.ac-badges {
  display: flex;
  flex-wrap: wrap;                     /* 62vw phones wrap, don't clip */
  gap: 6px;
  padding: 0.6rem 0.85rem 0.5rem;
}
.ac-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid;
}
/* palette: border accent/20, background accent/5, color accent/60 */
.ac-badge--green  { border-color: rgba(57, 255, 20, 0.2);  background: rgba(57, 255, 20, 0.05);  color: rgba(57, 255, 20, 0.6); }
.ac-badge--violet { border-color: rgba(167, 139, 250, 0.2); background: rgba(167, 139, 250, 0.05); color: rgba(167, 139, 250, 0.6); }
.ac-badge--sky    { border-color: rgba(56, 189, 248, 0.2);  background: rgba(56, 189, 248, 0.05);  color: rgba(56, 189, 248, 0.6); }

/* ---- band 3b: cycling ledger ---- */
.ac-ledger {
  position: relative;
  height: 22px;
  margin: 0.15rem 0.85rem 0.75rem;
}
.ac-ledger-row {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transform: translateY(-5px);
  /* the shuffle: the settled row slips up and out on this transition... */
  transition: opacity 170ms ease-in, transform 170ms ease-in;
}
/* ...and the next one rises in from below on this animation — a ledger
   advancing a line, not a crossfade */
.ac-ledger-row.on {
  opacity: 1;
  transform: none;
  animation: ac-row-in 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 130ms;              /* let the old row clear first */
}
@keyframes ac-row-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
.ac-avatar {
  width: 14px; height: 14px;
  flex: none;
  object-fit: cover;                   /* 56px source; no radius — their aesthetic */
}
.ac-ledger-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;             /* 62vw phones truncate the project text */
  font-size: 9px;
  color: #c8c8c8;
}
.ac-chip {
  flex: none;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1px 5px;
  border: 1px solid rgba(57, 255, 20, 0.2);
  background: rgba(57, 255, 20, 0.05);
  color: rgba(57, 255, 20, 0.6);       /* green PAID chip, their accent */
}

/* ---- ados — ados.events' hero, miniaturized ---------------------------- */
/* Its own face, self-hosted subset (assets/cards/PROVENANCE.md). */
@font-face {
  font-family: 'Pilowlava';
  src: url('../../assets/cards/ados/pilowlava-sub.woff2') format('woff2');
  font-display: swap;
}

.j-pop-stage.ad {
  height: 185px;
  background: #0a0a0a;   /* their theme-color ground */
  /* horizontal swipes are the card's (the ‹ › walker), never the page's:
     pan-y keeps vertical pans native and leaves horizontal gestures to the
     swipe listeners in ados.js (2026-08-19) */
  touch-action: pan-y;
}

/* Full-bleed event-media window: poster underneath, animated preview over. */
.ad-media,
.ad-media img,
.ad-scrim {
  position: absolute;
  inset: 0;
}
.ad-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the animated preview crossfades in over the poster — their opacity 500ms.
   Same fill/cover as the poster: without these the <video> renders at its
   intrinsic size, top-left in the frame (Peter, 2026-08-18: "centred within
   the frame"). */
.ad-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.ad-preview.on { opacity: 1; }

/* their event-media scrim: linear-gradient(to top, black, rgba(0,0,0,.4),
   rgba(0,0,0,.15)) */
.ad-scrim {
  background: linear-gradient(to top, #000, rgba(0,0,0,0.4), rgba(0,0,0,0.15));
  pointer-events: none;
}

/* Desktop keeps the existing wordmark-over-footer composition. The DOM is
   grouped so phones can turn the same pieces into one centred stack below. */
.ad-word {
  position: absolute;
  top: 26px;
  left: 38px;
  right: 38px;
  bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  pointer-events: none;
}
.ad-mark {
  font-family: 'Pilowlava', 'Arial Black', sans-serif;  /* their hero face */
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}
.ad-eyebrow {
  font-size: 8px;
  letter-spacing: 0.35em;          /* their tracking-[0.35em] subtitle */
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);    /* their white/70 */
}
/* the scrim is lightest at the top, so a halo keeps the mark legible over
   arbitrary poster art — same reasoning as arca's word shadow */
.ad-mark,
.ad-eyebrow {
  text-shadow: 0 1px 10px rgba(0,0,0,0.8), 0 0 2px rgba(0,0,0,0.7);
}

/* The walker arrows stay on the side edges at vertical middle, independent
   of caption length. The card sits above the rail (z-index 5), so the right
   arrow stays clickable at phone widths. */
.ad-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* vertical middle of the window — the
                                    arrows never move as captions change */
  width: 26px; height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.75);
  background: rgba(10, 10, 10, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
}
.ad-prev { left: 8px; }
.ad-next { right: 8px; }
.ad-nav:is(:hover, :focus-visible) { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.ad-center {
  position: absolute;
  left: -38px;
  right: -38px;
  bottom: -50px;
  min-height: 50px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.ad-mark { order: 1; }
.ad-eyebrow { order: 2; }
.ad-center { order: 3; }

@media (max-width: 620px) and (orientation: portrait) {
  /* Mobile feedback: location/date above ADOS, AI ART GATHERINGS below, and
     the three-line identity group centred vertically in the media frame. */
  .ad-word { inset: 0 38px; }
  .ad-center {
    position: static;
    order: 0;
    min-height: 0;
  }
}
/* the caption shuffles with its event — a small rise under the media
   crossfade so the two read as one gesture (re-armed per swap in ados.js) */
.ad-center.ad-swap { animation: ad-cap-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes ad-cap-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.ad-line {
  font-size: 10px;
  line-height: 1.35;
  color: rgba(255,255,255,0.9);
  max-width: 100%;           /* panes narrower than any real phone wrap to a
                                second line — a date is never amputated */
  text-align: center;
}
.ad-tag {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  border: 1px solid rgba(255,255,255,0.2);  /* their white/20 hairline */
  border-radius: 999px;
  padding: 2px 7px;
  white-space: nowrap;
}

/* ---- tworp — "2RP" editorial cover, miniaturized ----------------------- */
/* Its own faces, self-hosted subsets (assets/cards/PROVENANCE.md) — the
   wordmark rotates per session across these three display faces, which IS
   the site's identity. */
@font-face {
  font-family: 'Monoton';
  src: url('../../assets/cards/tworp/monoton-sub.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Sixtyfour';
  src: url('../../assets/cards/tworp/sixtyfour-sub.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Rubik Glitch';
  src: url('../../assets/cards/tworp/rubikglitch-sub.woff2') format('woff2');
  font-display: swap;
}

.j-pop-stage.rp {
  height: 200px;
  background: #000;   /* fallback behind the cover art */
}

.rp-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.0);
}
/* Ken Burns drift — scale 1.0 -> 1.06 over 9s, alternate; runs only while the
   stage is live (REDUCE stays static, plus the global REDUCE kill-switch in
   cards.css) */
.j-pop-stage.rp.rp-live .rp-cover {
  animation: rp-drift 9s ease-in-out alternate infinite;
}
@keyframes rp-drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* warm dark scrim, bottom half */
.rp-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(26,16,8,0.82),
    rgba(26,16,8,0.4) 50%,
    rgba(26,16,8,0) 100%
  );
  pointer-events: none;
}

/* tagline, masthead, and launch status, centred */
.rp-head {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-bottom: 8px;    /* a breath above true centre — cover-mast optics */
  text-align: center;
  pointer-events: none;
}
.rp-dek {
  font-size: 7px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
}
.rp-masthead {
  font-size: 2.6rem;
  line-height: 0.9;
  color: #fff;
  /* the face rotates per session (set inline in build); the halo keeps the
     white mark legible over arbitrary cover art */
  text-shadow:
    0 1px 14px rgba(0,0,0,0.85),
    0 0 4px rgba(0,0,0,0.7);
}

/* The launch status completes the centred editorial stack below the mark. */
.rp-soon {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

/* ---- hivemind — a replayed query, in the house's own light ------------ */
/* Hivemind has no brand color; the card wears site.css's house gold
   (#d9a441) on the house-dark ground, and a terminal mono face. Ground is
   the brief's house-dark rgba(10,7,3,…) (#0a0703), kept at 0.94 so the
   transcript reads as a dim console against the panel. */

.j-pop-stage.hm {
  position: relative;
  height: auto;         /* the transcript sets the height — a narrow pane
                           wraps lines and the card breathes instead of
                           clipping its own foot */
  min-height: 170px;
  display: flex;
  flex-direction: column;
  background: rgba(10, 7, 3, 0.94);   /* house-dark ground #0a0703 */
}

/* the console's title bar: what it is, in one line */
.hm-head {
  padding: 0.55rem 1rem 0.45rem;
  border-bottom: 1px solid rgba(217, 164, 65, 0.15);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.hm-name {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(217, 164, 65, 0.75);      /* house gold */
}

.hm-console {
  flex: 1 1 auto;
  padding: 0.55rem 1rem 0.2rem;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(233, 221, 201, 0.82);
}

.hm-line {
  margin: 0 0 0.26rem;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hm-line.on { opacity: 1; transform: none; }

.hm-query { opacity: 1; transform: none; }   /* prompt always present */
.hm-query .hm-prompt { color: #d9a441; }     /* house gold */
.hm-query .hm-typed { color: rgba(233, 221, 201, 0.92); }

.hm-search { color: rgba(217, 164, 65, 0.55); }   /* muted amber */
.hm-spinner {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-right: 0.4em;
  vertical-align: -0.05em;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hm-spin 0.7s linear infinite;
}
.hm-search.done .hm-spinner {
  animation: none;
  opacity: 0.35;
  border-top-color: currentColor;   /* search settled: a still full ring */
}
@keyframes hm-spin { to { transform: rotate(1turn); } }

.hm-hit { color: #d9a441; }                     /* house gold: the land */

.hm-ans {
  color: rgba(233, 221, 201, 0.78);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hm-foot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;           /* stats over door — a narrow pane
                                       stacks instead of overflowing the
                                       stage's fixed height */
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  min-height: 44px;                 /* clears the mascot's 44px */
  padding: 0.35rem 0 0.4rem;
  border-top: 1px solid rgba(217, 164, 65, 0.15);
}

.hm-stats {
  margin: 0;
  padding: 0 3.2rem 0 1rem;             /* right pad clears the mascot */
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  line-height: 1.5;                     /* wraps to two console lines on
                                           narrow panes — never truncates
                                           the corpus out of its own stat */
  color: rgba(217, 164, 65, 0.6);       /* house gold, dimmed */
}

.hm-mascot {
  position: absolute;
  right: 0.65rem;
  bottom: 0;
  height: 44px;
  width: auto;
  image-rendering: pixelated;
  opacity: 0.9;
}

/* ---- discord — banodoco.ai's own Community feed, miniaturized ---------- */
/* Live data is the site's own Supabase table daily_summaries (discord.js);
   colors below borrow its TopicCard language:
     parchment #f4e4c1  — the community section's warm text tone
     emerald   #10b981  — the pulsing "live" dot on its TopicCard (dot only)
     blurple   #5865F2  — Discord's brand blue, as a 2px left-rule nod
   Ground stays the house-dark panel (rgba(10,7,3,…) #0a0703). */

.j-pop-stage.dc {
  height: auto;         /* topics set the height — clamped copy keeps it
                           steady; narrow panes breathe instead of clipping */
  min-height: 176px;
  display: flex;
  flex-direction: column;
  background: rgba(10, 7, 3, 0.94);   /* house-dark ground #0a0703 */
  /* horizontal swipes are the card's (the topic walk), never the page's:
     pan-y keeps vertical pans native and leaves horizontal gestures to the
     swipe listeners in discord.js (2026-08-19) */
  touch-action: pan-y;
}

.dc-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem 0.15rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 228, 193, 0.55);   /* parchment, dimmed */
}

.dc-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;                /* emerald, their live dot */
  animation: dc-pulse 2s ease-in-out infinite;
}
.dc-fallback .dc-beacon { visibility: hidden; animation: none; } /* reserve the live-dot slot */

@keyframes dc-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 5px rgba(16, 185, 129, 0); }
}

.dc-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 0.35rem 1rem 0.35rem 1.1rem;
}

.dc-topic {
  border-left: 2px solid #5865F2;    /* blurple, a nod not a theme */
  padding-left: 0.7rem;
}

/* the shuffle: out through the top, in from below — two beats, eased so
   the swap reads as one motion (durations paired with discord.js LEAVE_MS) */
.dc-leave { animation: dc-out 190ms ease-in both; }
.dc-enter { animation: dc-in 300ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes dc-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-7px); }
}
@keyframes dc-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

.dc-title {
  margin: 0 0 0.3rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: #f4e4c1;                     /* parchment */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-text {
  margin: 0 0 0.35rem;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  line-height: 1.45;
  color: rgba(244, 228, 193, 0.55);   /* parchment, muted */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dc-meta {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 228, 193, 0.4);
}

.dc-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 0 0.6rem;
}

.dc-dot {
  position: relative;
  width: 4px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 228, 193, 0.25);
  cursor: pointer;
  overflow: hidden;
  transition: width 0.25s ease;
}
/* the active dot stretches into a pill whose fill IS the load state for
   the next item — banodoco.ai's own progress grammar (its MediaGallery
   bars and EventSelector pills). Fill duration = discord.js CYCLE_MS. */
.dc-dot.is-on { width: 16px; background: rgba(88, 101, 242, 0.28); }
.dc-dot.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #5865F2;               /* blurple fill */
  transform: translateX(-100%);
}
.dc-live .dc-dot.is-on.dc-filling::after {
  /* duration rides --dc-cycle (discord.js sets it per window: a shorter
     opener, then CYCLE_MS) so the fill never lies about the wait */
  animation: dc-fill var(--dc-cycle, 7s) linear both;
}
@keyframes dc-fill { from { transform: translateX(-100%); } to { transform: none; } }
/* no cycle running (single topic, REDUCE, fallback): the pill reads full */
.dc-dot.is-on:not(.dc-filling)::after { transform: none; }

/* ---- the doors and the thumbs (2026-08-18 refactor: no house block —
   each stage carries its own CTA in its own voice; all reveal via the
   shared .card-cta rule in the shell section) ------------------------- */

/* artcompute — their green CTA treatment, in the header's flex flow
   between wordmark and status dot (never overlaps at any width) */
.ac-cta {
  flex: none;
  margin-left: auto;
  padding: 2px 7px;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: #39ff14;
  background: rgba(57, 255, 20, 0.15);   /* their bg-[#39ff14]/15 */
  border: 1px solid rgba(57, 255, 20, 0.3);
}
.ac-cta:is(:hover, :focus-visible) { background: rgba(57, 255, 20, 0.25); }
.ac-header { gap: 0.6rem; }              /* title · cta · dot breathing room */

/* ados — its eyebrow voice as a top-right tag, like its event chips */
.ad-cta {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 8px;
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(10, 10, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;                  /* their tag pills are rounded */
}
.ad-cta:is(:hover, :focus-visible) { border-color: rgba(255, 255, 255, 0.6); }

/* hivemind — a gold mono door on the foot's second line */
.hm-link {
  flex: none;
  margin-left: 1rem;                     /* aligns under the stats' indent */
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.62rem;
  color: #d9a441;                        /* house gold */
}
.hm-link:is(:hover, :focus-visible) { color: #f0c87a; }

/* discord — a quiet blurple door on the head's right */
.dc-cta {
  margin-left: auto;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #5865F2;
}
.dc-cta:is(:hover, :focus-visible) { color: #8891f2; }

/* discord — the topic's image, very small, beside the copy (live data
   only; the baked fallback has no media and an expired link never shows) */
.dc-topic { display: flex; align-items: flex-start; gap: 0.6rem; }
.dc-copy { flex: 1 1 auto; min-width: 0; }
.dc-thumb {
  flex: none;
  width: 46px; height: 46px;
  margin-top: 2px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid rgba(244, 228, 193, 0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dc-thumb.on { opacity: 1; }
.dc-thumb:not([src]) { display: none; }

/* ---- chip pictographs (Hannah, 2026-08-18: custom minimal icons in place
   of the white dots) — same footprint and dodge-pin as the dot they
   replace, same gold, one hairline drawing per initiative -------------- */
.j-hot-dot.j-hot-ico {
  width: 13px; height: 13px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(240, 200, 119, 0.72);       /* the dot's own gold */
  filter: drop-shadow(0 0 5px rgba(240, 170, 60, 0.45));
}
.j-hot-dot.j-hot-ico svg {
  display: block;
  width: 100%; height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* hover/hot/focus brightens the drawing exactly as it brightened the dot */
.j-hot:is(:hover, .hot, :focus-visible) .j-hot-dot.j-hot-ico {
  background: none;
  box-shadow: none;
  color: rgba(255, 228, 170, 0.98);
  filter: drop-shadow(0 0 7px rgba(240, 170, 60, 0.7));
}

/* THE INITIATIVE MARKER IS ONE JOINED SHAPE (2026-08-19). The six custom
   marks used to read as decorative bullets to the LEFT of each name. Here the
   pictograph sits in a small tab centred over the word: icon first, label
   second, one compact spatial marker.

   This is genuinely one optical fill. The first attempt painted translucent
   backgrounds on both the tab and body and overlapped them by 5px; alpha
   accumulated at the join and made a dirty shadow seam. The body (`::after`)
   now begins at y=16 exactly where the tab's own 16px backing ends — adjacent,
   never overlapping. ui.js separately centres the measured button on its
   projected world point, so the visual change does not lie about its node. */
.j-hot.j-hot--icon-tab {
  --j-chip-bg: rgba(12, 8, 3, 0.48);
  display: grid;
  grid-template-columns: max-content;
  grid-template-rows: 22px auto;
  justify-items: center;
  align-items: start;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.j-hot.j-hot--icon-tab::after {
  content: "";
  position: absolute;
  z-index: 0;
  /* Four pixels above the label's ink, matching its four-pixel lower pad.
     Starting at 12px made the capsule look top-heavy and swallowed the tab. */
  top: 16px;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: 999px;
  background: var(--j-chip-bg);
  opacity: var(--j-hot-shell-in, 1);
  transform: translateY(var(--j-hot-shell-y, 0));
  transform-origin: 50% 30%;
  pointer-events: none;
}
.j-hot.j-hot--icon-tab:is(:hover, .hot, :focus-visible) {
  --j-chip-bg: rgba(18, 12, 4, 0.72);
  background: transparent;
}
.j-hot--icon-tab .j-hot-dot.j-hot-ico {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 4.5px;
  margin: 0;
  border-radius: 0;
  background: transparent;
  /* A collision dodge moves this joined marker as ONE object. The generic
     ember dot is pinned back to its world node, but pinning this tab would
     tear it away from the capsule (and can put it underneath, as on Arca at
     430px). --j-dot-dy still keeps the invisible node hit-pad truthful. */
  opacity: var(--j-hot-icon-in, 1);
  transform: translateY(var(--j-hot-icon-y, 0)) scale(var(--j-hot-icon-scale, 1));
  transform-origin: 50% 75%;
}
.j-hot--icon-tab .j-hot-dot.j-hot-ico::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 22px;
  height: 16px;
  border-radius: 5px 5px 0 0;
  background: var(--j-chip-bg);
  pointer-events: none;
}
.j-hot--icon-tab .j-hot-dot.j-hot-ico svg {
  position: relative;
  z-index: 1;
  width: 13px;
  height: 13px;
  transform-origin: center;
  transition: transform 0.3s ease;
}
.j-hot--icon-tab .j-hot-label {
  position: relative;
  /* Sit above the single body paint. At z=0 the translucent ::after could
     composite over the glyphs, making the joined marker look inexplicably
     muddy even though the geometry itself was correct. */
  z-index: 1;
  grid-row: 2;
  box-sizing: border-box;
  min-height: 17px;
  margin-top: -4px;
  padding: 2px 12px 4px;
  border-radius: 0;
  background: transparent;
  line-height: 1.05;
  text-align: center;
  white-space: nowrap;
  opacity: var(--j-hot-label-in, 1);
  transform: translateY(var(--j-hot-label-y, 0));
}
/* The generic hotspot hover grows its dot. Here that dot is the TAB itself,
   so scaling it would split the silhouette; only the drawing breathes. */
.j-hot--icon-tab:is(:hover, .hot, :focus-visible) .j-hot-dot.j-hot-ico {
  background: transparent;
  transform: translateY(var(--j-hot-icon-y, 0)) scale(var(--j-hot-icon-scale, 1));
}
.j-hot--icon-tab:is(:hover, .hot, :focus-visible) .j-hot-dot.j-hot-ico svg {
  transform: scale(1.14);
}
@media (max-width: 720px), (max-height: 560px) {
  .j-hot.j-hot--icon-tab { --j-chip-bg: rgba(12, 8, 3, 0.66); }
  .j-hot.j-hot--icon-tab:is(:hover, .hot, :focus-visible) {
    --j-chip-bg: rgba(18, 12, 4, 0.78);
  }
}

/* Keep the initiative entry motion-free when the visitor has asked for less
   motion. The parent hotspot's visibility still changes, but its joined
   shell, icon, and name appear in their final positions immediately. */
@media (prefers-reduced-motion: reduce) {
  .j-hot.j-hot--icon-tab::after,
  .j-hot--icon-tab .j-hot-dot.j-hot-ico,
  .j-hot--icon-tab:is(:hover, .hot, :focus-visible) .j-hot-dot.j-hot-ico,
  .j-hot--icon-tab .j-hot-label {
    opacity: 1;
    transform: none;
  }
  .j-hot--icon-tab .j-hot-dot.j-hot-ico svg,
  .j-hot--icon-tab:is(:hover, .hot, :focus-visible) .j-hot-dot.j-hot-ico svg {
    transform: none;
    transition: none;
  }
}