/* =====================================================================
   CHAVANS — RESOURCES · INTERNAL PAGES
   Perspectives · White Papers · Reference Architectures · Conversations · News
   Loads AFTER applied-ai.css (canvas --u = 100vw/1600, nav, type roles,
   CTA, footer). Prefix: .rsx-
   Motion is progressive: hidden states only apply under html.rsx-js
   (added by resources-listing.js, never under prefers-reduced-motion).
===================================================================== */

:root{
  --rsx-card:  #D9D9D9;   /* bg1 85% — listing cards / media placeholders */
  --rsx-rule:  #D9D9D9;
  --rsx-band:  #E6E6E6;   /* bg1 90% — upcoming conversations */
}

/* ---------- 01 HERO (white, title left + geometric tile right) ---------- */
.rsx-hero{ background: #fff; color: var(--ink-75); --h: 790; }
.rsx-hero .hero-tag, .rsx-hero .hero-tag-plus{ color: var(--ink-85); }
.rsx-tag{ font-size: calc(var(--u) * 13.8); line-height: calc(var(--u) * 20); letter-spacing: 0.02em; }
.rsx-title{
  font-family: var(--sans); font-weight: 500;
  font-size: calc(var(--u) * 73.33);           /* 44pt */
  line-height: calc(var(--u) * 88);
  letter-spacing: -0.006em;
  color: var(--ink-75);
}
.rsx-title--80{ font-size: calc(var(--u) * 80); line-height: calc(var(--u) * 96); }
.rsx-ln{ display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rsx-ln > span{ display: block; }
.rsx-hero-sub{
  font-family: var(--mono);
  font-size: calc(var(--u) * 13.4);
  line-height: calc(var(--u) * 19.5);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-65);
}

/* the tile — drawn grid, dots, accent lines and squares (inline SVG) */
.rsx-tile{
  width: calc(var(--u) * 603.2); height: calc(var(--u) * 465.9);
  background: var(--tile, #E3F671);
  overflow: hidden;
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.rsx-tile svg{ display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- 02 LISTING ---------- */
.rsx-list{
  background: #fff; color: #000;
  height: auto; min-height: calc(var(--u) * 900);
  padding: calc(var(--u) * 105) calc(var(--u) * 106) calc(var(--u) * 140) calc(var(--u) * 101.7);
}
.rsx-list-h{
  font-family: var(--sans); font-weight: 400;
  font-size: calc(var(--u) * 30); line-height: calc(var(--u) * 40);
  color: #000; padding-left: calc(var(--u) * 6.5);
}

/* filter + search row */
.rsx-bar{ display: flex; align-items: flex-end; gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 20); }
.rsx-filter-btn{
  flex: none; position: relative;
  display: inline-flex; align-items: center; gap: calc(var(--u) * 9);
  height: calc(var(--u) * 49.8); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 22);
  border: 1.67px solid #000; border-radius: calc(var(--u) * 25);
  font-family: var(--sans); font-size: calc(var(--u) * 18.33); color: #000;
  transition: background .25s, color .25s;
}
.rsx-filter-btn svg{ width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.rsx-filter-btn:hover{ background: #F2F2F2; }
.rsx-filter-btn[aria-expanded="true"]{ background: #000; color: #fff; }
.rsx-filter-count{
  display: none; min-width: calc(var(--u) * 22); height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 6);
  border-radius: 999px; background: #000; color: #fff;
  font-family: var(--mono); font-size: calc(var(--u) * 12); line-height: calc(var(--u) * 22); text-align: center;
}
.rsx-filter-btn[aria-expanded="true"] .rsx-filter-count{ background: #fff; color: #000; }
.rsx-filter-count.is-on{ display: inline-block; }

.rsx-search{
  flex: 1; position: relative;
  display: flex; align-items: center; gap: calc(var(--u) * 20);
  height: calc(var(--u) * 52);
  border-bottom: 1.25px solid var(--grey-65);
  padding-left: calc(var(--u) * 21);
  transition: border-color .25s;
}
.rsx-search:focus-within{ border-color: #000; }
.rsx-search svg{ flex: none; width: calc(var(--u) * 23); height: calc(var(--u) * 23); color: #000; }
.rsx-search input{
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--sans); font-size: calc(var(--u) * 20); color: #000;
  padding: 0;
}
.rsx-search input::placeholder{ color: var(--grey-65); }
.rsx-search-clear{ width: calc(var(--u) * 28); height: calc(var(--u) * 28); color: var(--ink-65); display: none; }
.rsx-search-clear.is-on{ display: block; }

/* filter panel */
.rsx-panel{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.2,.7,.2,1); }
.rsx-panel > div{ overflow: hidden; }
.rsx-panel.is-open{ grid-template-rows: 1fr; }
.rsx-panel-in{
  margin-top: calc(var(--u) * 26);
  padding: calc(var(--u) * 30) calc(var(--u) * 32) calc(var(--u) * 26);
  background: #F2F2F2; border-radius: calc(var(--u) * 20);
  display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr) auto; column-gap: calc(var(--u) * 48);
}
.rsx-group h4{
  font-family: var(--mono); font-weight: 400; font-size: calc(var(--u) * 12.4); letter-spacing: 0.06em;
  color: var(--ink-65); text-transform: uppercase;
  padding-bottom: calc(var(--u) * 12); border-bottom: 1px solid var(--rsx-rule);
}
.rsx-group ul{ margin-top: calc(var(--u) * 14); display: grid; gap: calc(var(--u) * 10); }
.rsx-check{ display: flex; align-items: center; gap: calc(var(--u) * 12); cursor: pointer; user-select: none;
  font-family: var(--sans); font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 24); color: var(--ink-85); }
.rsx-check input{ position: absolute; opacity: 0; pointer-events: none; }
.rsx-box{ flex: none; width: calc(var(--u) * 18); height: calc(var(--u) * 18); border: 1.4px solid var(--ink-65); border-radius: 3px; position: relative; transition: background .2s, border-color .2s; }
.rsx-box::after{ content: ""; position: absolute; left: 28%; top: 10%; width: 32%; height: 58%; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0); transition: transform .2s; }
.rsx-check input:checked + .rsx-box{ background: #000; border-color: #000; }
.rsx-check input:checked + .rsx-box::after{ transform: rotate(45deg) scale(1); }
.rsx-check input[type="radio"] + .rsx-box{ border-radius: 50%; }
.rsx-check input[type="radio"] + .rsx-box::after{ left: 50%; top: 50%; width: 44%; height: 44%; border: 0; border-radius: 50%; background: #fff; transform: translate(-50%,-50%) scale(0); }
.rsx-check input[type="radio"]:checked + .rsx-box::after{ transform: translate(-50%,-50%) scale(1); }
.rsx-check input:focus-visible + .rsx-box{ outline: 2px solid #000; outline-offset: 2px; }
.rsx-check:hover .rsx-box{ border-color: #000; }
.rsx-n{ font-family: var(--mono); font-size: calc(var(--u) * 12.4); color: var(--grey-50); margin-left: auto; }
.rsx-panel-actions{ display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: calc(var(--u) * 10); }
.rsx-link-btn{ font-family: var(--mono); font-size: calc(var(--u) * 12.4); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-85); text-decoration: underline; text-underline-offset: 3px; }

/* status row: count + active chips */
.rsx-status{ display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 10) calc(var(--u) * 14); margin-top: calc(var(--u) * 36); min-height: calc(var(--u) * 30); padding-left: calc(var(--u) * 13.7); }
.rsx-count{ font-family: var(--mono); font-size: calc(var(--u) * 15); letter-spacing: 0.02em; color: var(--ink-75); margin-right: calc(var(--u) * 10); }
.rsx-chip{
  display: inline-flex; align-items: center; gap: calc(var(--u) * 8);
  height: calc(var(--u) * 28); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 12);
  border-radius: calc(var(--u) * 6); background: #F2F2F2;
  font-family: var(--mono); font-size: calc(var(--u) * 12.4); letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-85);
  transition: background .2s;
}
.rsx-chip:hover{ background: #E6E6E6; }
.rsx-chip i{ position: relative; width: calc(var(--u) * 10); height: calc(var(--u) * 10); }
.rsx-chip i::before, .rsx-chip i::after{ content: ""; position: absolute; left: 50%; top: 0; width: 1.2px; height: 100%; background: currentColor; }
.rsx-chip i::before{ transform: rotate(45deg); } .rsx-chip i::after{ transform: rotate(-45deg); }

/* ---------- card grid (Perspectives · White papers · News) ---------- */
.rsx-grid{
  margin-top: calc(var(--u) * 26);
  padding-left: calc(var(--u) * 13.3);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 52);
}
.rsx-card{
  position: relative; display: flex; flex-direction: column;
  min-height: calc(var(--u) * 425.2);
  padding: calc(var(--u) * 42) calc(var(--u) * 40) calc(var(--u) * 42);
  background: var(--rsx-card); border-radius: calc(var(--u) * 22);
  color: #000;
  transition: background .35s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.rsx-card--short{ min-height: calc(var(--u) * 312); }
.rsx-card:hover{ background: #CFCFCF; transform: translateY(calc(var(--u) * -6)); }
.rsx-pill{
  align-self: flex-start;
  display: inline-flex; align-items: center; height: calc(var(--u) * 33.4); padding: 0 calc(var(--u) * 11);
  background: #fff; border-radius: calc(var(--u) * 3);
  font-family: var(--mono); font-size: calc(var(--u) * 15); letter-spacing: 0.02em; color: var(--ink-85); text-transform: uppercase;
}
.rsx-date{ display: flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 20); font-family: var(--mono); font-size: calc(var(--u) * 15); color: var(--ink-75); }
.rsx-date svg{ width: calc(var(--u) * 24); height: calc(var(--u) * 24); flex: none; }
.rsx-card-t{ margin-top: calc(var(--u) * 14); font-family: var(--sans); font-size: calc(var(--u) * 26.67); line-height: calc(var(--u) * 32); color: #000; text-wrap: pretty; }
.rsx-card-d{ margin-top: calc(var(--u) * 26); font-family: var(--sans); font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 22); color: var(--ink-65); text-wrap: pretty; }
.rsx-arrow{ margin-top: auto; padding-top: calc(var(--u) * 30); display: block; height: calc(var(--u) * 10); }
.rsx-arrow svg{ display: block; width: calc(var(--u) * 37); height: calc(var(--u) * 10); overflow: visible; transition: width .45s cubic-bezier(.2,.7,.2,1); }
.rsx-card:hover .rsx-arrow svg{ width: calc(var(--u) * 64); }
.rsx-arrow path{ vector-effect: non-scaling-stroke; }

/* ---------- row list (Reference architectures · Conversations) ---------- */
.rsx-rows{ margin-top: calc(var(--u) * 50); }
.rsx-row{
  display: grid; grid-template-columns: calc(var(--u) * 584.4) 1fr; column-gap: calc(var(--u) * 153);
  align-items: center;
  padding: calc(var(--u) * 26) 0;
  border-top: 1.25px solid var(--rsx-rule);
  margin-left: calc(var(--u) * 5);
}
.rsx-row:last-child{ border-bottom: 1.25px solid var(--rsx-rule); }
.rsx-media{
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 584.4 / 312.7;
  background: var(--rsx-card);
}
.rsx-media img{ width: 100%; height: 100%; object-fit: cover; object-position: left top; display: block; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.rsx-media--frame{ background: #fff; border: 1.25px solid var(--rsx-rule); }
.rsx-media--frame img{ object-fit: contain; object-position: center; padding: calc(var(--u) * 10) calc(var(--u) * 14) 0; }
.rsx-row:hover .rsx-media img{ transform: scale(1.035); }
.rsx-media-tag{
  position: absolute; left: calc(var(--u) * 16); top: calc(var(--u) * 14);
  font-family: var(--mono); font-size: calc(var(--u) * 15); letter-spacing: 0.02em; color: var(--ink-75);
  background: rgba(255,255,255,.92); padding: calc(var(--u) * 3) calc(var(--u) * 6);
}
.rsx-play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: calc(var(--u) * 72); height: calc(var(--u) * 72); border-radius: 50%;
  border: 1.5px solid var(--ink-65); display: grid; place-items: center; color: var(--ink-75);
  transition: background .3s, color .3s, border-color .3s, transform .5s cubic-bezier(.2,.7,.2,1);
}
.rsx-play svg{ width: 28%; height: 28%; margin-left: 6%; }
.rsx-row:hover .rsx-play{ background: #000; border-color: #000; color: #fff; transform: translate(-50%,-50%) scale(1.06); }
.rsx-when{
  position: absolute; left: calc(var(--u) * 26); bottom: calc(var(--u) * 22);
  font-family: var(--sans); font-weight: 500; color: var(--ink-75);
}
.rsx-when b{ display: block; font-weight: 500; font-size: calc(var(--u) * 96); line-height: .9; letter-spacing: -0.02em; }
.rsx-when span{ display: block; margin-top: calc(var(--u) * 8); font-family: var(--mono); font-weight: 400; font-size: calc(var(--u) * 13.4); letter-spacing: 0.04em; text-transform: uppercase; }
.rsx-live{ position: absolute; right: calc(var(--u) * 20); top: calc(var(--u) * 18); display: flex; align-items: center; gap: calc(var(--u) * 8); font-family: var(--mono); font-size: calc(var(--u) * 12.4); letter-spacing: 0.06em; color: var(--ink-75); }
.rsx-live i{ width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; background: #2DD4A2; box-shadow: 0 0 0 0 rgba(45,212,162,.5); animation: rsxPulse 2s infinite; }
@keyframes rsxPulse{ 0%{ box-shadow: 0 0 0 0 rgba(45,212,162,.55);} 70%{ box-shadow: 0 0 0 calc(var(--u)*10) rgba(45,212,162,0);} 100%{ box-shadow: 0 0 0 0 rgba(45,212,162,0);} }

.rsx-row-t{ font-family: var(--sans); font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 48); color: #000; text-wrap: balance; max-width: calc(var(--u) * 640); }
.rsx-row-t--s{ font-size: calc(var(--u) * 33.33); line-height: calc(var(--u) * 40); max-width: calc(var(--u) * 560); }
.rsx-row-d{ margin-top: calc(var(--u) * 18); font-family: var(--sans); font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 22); color: var(--ink-65); max-width: calc(var(--u) * 640); text-wrap: pretty; }
.rsx-row .rsx-date{ margin-top: calc(var(--u) * 14); }
.rsx-btn{
  display: inline-flex; align-items: center; gap: calc(var(--u) * 12);
  height: calc(var(--u) * 40.4); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 14);
  margin-top: calc(var(--u) * 26);
  border-radius: calc(var(--u) * 6);
  background: var(--ink-75); color: #fff;
  font-family: var(--sans); font-size: calc(var(--u) * 18.33);
  transition: background .25s;
}
.rsx-btn--grey{ background: var(--ink-65); }
.rsx-btn svg{ width: calc(var(--u) * 16); height: calc(var(--u) * 12); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.rsx-btn:hover{ background: #000; }
.rsx-btn:hover svg{ transform: translateX(calc(var(--u) * 4)); }
.rsx-meta{ margin-top: calc(var(--u) * 16); font-family: var(--mono); font-size: calc(var(--u) * 15); letter-spacing: 0.02em; color: var(--ink-85); text-transform: uppercase; }

/* empty state + pagination */
.rsx-empty{ margin-top: calc(var(--u) * 40); padding: calc(var(--u) * 70) calc(var(--u) * 20); border: 1.25px dashed var(--grey-65); border-radius: calc(var(--u) * 20); text-align: center; }
.rsx-empty p{ font-family: var(--sans); font-size: calc(var(--u) * 26.67); color: var(--ink-75); }
.rsx-empty .rsx-link-btn{ display: inline-block; margin-top: calc(var(--u) * 16); }
.rsx-pager{ display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 64); }
.rsx-pg{
  min-width: calc(var(--u) * 40); height: calc(var(--u) * 40); padding: 0 calc(var(--u) * 8);
  border-radius: calc(var(--u) * 8);
  font-family: var(--mono); font-size: calc(var(--u) * 13.4); color: var(--ink-75);
  transition: background .2s, color .2s;
}
.rsx-pg:hover:not([disabled]){ background: #F2F2F2; }
.rsx-pg[aria-current="page"]{ background: #000; color: #fff; }
.rsx-pg[disabled]{ opacity: .3; cursor: default; }

/* ---------- CONVERSATIONS: upcoming band + library ---------- */
.rsx-upcoming{ background: var(--rsx-band); color: var(--ink); height: auto; padding: calc(var(--u) * 92) calc(var(--u) * 106) calc(var(--u) * 120) calc(var(--u) * 98.8); }
.rsx-up-t{ margin-top: calc(var(--u) * 26); font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 46.67); line-height: calc(var(--u) * 56); color: #1A1A1A; max-width: calc(var(--u) * 980); }
.rsx-up-b{ margin-top: calc(var(--u) * 34); max-width: calc(var(--u) * 548); color: var(--ink-65); }
.rsx-upcoming .rsx-rows{ margin-top: calc(var(--u) * 60); }
.rsx-upcoming .rsx-row{ border-color: #CFCFCF; margin-left: 0; }
.rsx-upcoming .rsx-media{ background: #D9D9D9; }

.rsx-library{ background: var(--night); color: #fff; height: auto; padding: calc(var(--u) * 98) calc(var(--u) * 80) calc(var(--u) * 150) calc(var(--u) * 100.4); }
.rsx-library .rsx-sectag{ color: #fff; }
.rsx-lib-t{ margin-top: calc(var(--u) * 56); font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 46.67); line-height: calc(var(--u) * 56); color: #D9D9D9; max-width: calc(var(--u) * 900); }
.rsx-lib-cols{ margin-top: calc(var(--u) * 80); display: grid; grid-template-columns: repeat(3, calc(var(--u) * 435.6)); column-gap: calc(var(--u) * 50); }
.rsx-lib-col{ display: block; text-align: left; position: relative; padding-top: calc(var(--u) * 26); border-top: 1px solid #404040; transition: border-color .35s; }
.rsx-lib-col::before{ content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: #fff; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.rsx-lib-col:hover::before, .rsx-lib-col:focus-visible::before{ width: 100%; }
.rsx-lib-h{ display: block; font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 26.67); line-height: calc(var(--u) * 32); color: #fff; }
.rsx-lib-d{ display: block; margin-top: calc(var(--u) * 18); font-family: var(--sans); font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 22); color: var(--grey-65); max-width: calc(var(--u) * 400); text-wrap: pretty; }
.rsx-lib-go{ display: inline-flex; align-items: center; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 28); font-family: var(--mono); font-size: calc(var(--u) * 12.4); letter-spacing: 0.06em; color: var(--grey-50); transition: color .3s; }
.rsx-lib-go svg{ width: calc(var(--u) * 24); height: calc(var(--u) * 9); transition: transform .35s; }
.rsx-lib-col:hover .rsx-lib-go{ color: #fff; }
.rsx-lib-col:hover .rsx-lib-go svg{ transform: translateX(calc(var(--u) * 6)); }

/* section tag used inside flowing sections */
.rsx-sectag{ display: flex; align-items: center; gap: calc(var(--u) * 14); color: var(--ink-85); }
.rsx-sectag .plus{ position: relative; flex: none; }

/* ---------- NEWS: how news is organised (dark) ---------- */
.rsx-org{ background: var(--night); color: #fff; height: auto; min-height: calc(var(--u) * 900); padding: calc(var(--u) * 132) calc(var(--u) * 80) calc(var(--u) * 140) calc(var(--u) * 113); }
.rsx-org .rsx-sectag{ color: #fff; }
.rsx-org-list{ margin-top: calc(var(--u) * 110); display: grid; gap: calc(var(--u) * 64); max-width: calc(var(--u) * 660); }
.rsx-org-item{ display: block; position: relative; padding-left: calc(var(--u) * 28); }
.rsx-org-item .brk{ position: absolute; left: 0; top: calc(var(--u) * 6); bottom: calc(var(--u) * 2); width: calc(var(--u) * 8); border: 1.4px solid #595959; border-right: 0; transition: border-color .35s; }
.rsx-org-item:hover .brk{ border-color: #fff; }
.rsx-org-h{ display: flex; align-items: baseline; justify-content: space-between; gap: calc(var(--u) * 20); font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 48); color: #fff; }
.rsx-org-b{ display: block; margin-top: calc(var(--u) * 18); font-family: var(--sans); font-size: calc(var(--u) * 18.33); line-height: calc(var(--u) * 22); color: var(--grey-65); text-wrap: pretty; }
.rsx-org-go{ flex: none; font-family: var(--mono); font-weight: 400; font-size: calc(var(--u) * 12.4); letter-spacing: 0.06em; color: var(--grey-50); display: inline-flex; align-items: center; gap: calc(var(--u) * 10); transition: color .3s; }
.rsx-org-go svg{ width: calc(var(--u) * 24); height: calc(var(--u) * 9); transition: transform .35s; }
.rsx-org-item:hover .rsx-org-go{ color: #fff; }
.rsx-org-item:hover .rsx-org-go svg{ transform: translateX(calc(var(--u) * 6)); }

/* CTA band on these templates */
.rsx-cta{ background: #111; }

/* =====================================================================
   MOTION (html.rsx-js)
===================================================================== */
.rsx-js [data-rv]{ opacity: 0; transform: translate3d(0, calc(var(--u) * 26), 0); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.rsx-js [data-rv].is-in{ opacity: 1; transform: none; }
.rsx-js .rsx-ln > span{ transform: translate3d(0, 105%, 0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.rsx-js .is-loaded .rsx-ln > span{ transform: none; }

/* tile build: thin grid draws → dots pop → accents draw → fills land */
.rsx-js .rsx-tile .g-thin{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.rsx-js .rsx-tile .g-thick{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.rsx-js .rsx-tile .g-dot{ transform: scale(0); }
.rsx-js .rsx-tile .g-fill{ opacity: 0; transform: scale(.6); }
.rsx-tile .g-dot, .rsx-tile .g-fill{ transform-box: fill-box; transform-origin: center; }
.rsx-js .is-loaded .rsx-tile .g-thin{ stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.65,.05,.25,1); transition-delay: calc(300ms + var(--i, 0) * 60ms); }
.rsx-js .is-loaded .rsx-tile .g-dot{ transform: scale(1); transition: transform .5s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(800ms + var(--i, 0) * 28ms); }
.rsx-js .is-loaded .rsx-tile .g-thick{ stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(.65,.05,.25,1); transition-delay: calc(1250ms + var(--i, 0) * 140ms); }
.rsx-js .is-loaded .rsx-tile .g-fill{ opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(1900ms + var(--i, 0) * 160ms); }
/* idle: accent square breathes */
.rsx-js .is-loaded .rsx-tile .g-fill.g-breathe{ animation: rsxBreathe 5s ease-in-out 3.2s infinite; }
@keyframes rsxBreathe{ 0%,100%{ opacity: 1; } 50%{ opacity: .55; } }

/* listing items enter */
.rsx-js .rsx-item{ opacity: 0; transform: translate3d(0, calc(var(--u) * 22), 0); }
.rsx-js .rsx-item.is-in{ opacity: 1; transform: none; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--d, 0) * 1ms); }
.rsx-js .rsx-card.rsx-item.is-in:hover{ transform: translateY(calc(var(--u) * -6)); transition-delay: 0ms; }

/* =====================================================================
   MOBILE (≤ 900px)
===================================================================== */
@media (max-width: 900px){
  .rsx-hero{ padding-top: 6vw; padding-bottom: 14vw; }
  .rsx-title, .rsx-title--80{ font-size: 10.5vw; line-height: 1.06; margin-top: 6vw; }
  .rsx-title br{ display: none; }
  .rsx-tag{ font-size: 0.8125rem; line-height: 1.4; }
  .rsx-hero-sub{ font-size: 0.8125rem; line-height: 1.5; margin-top: 7vw; width: auto !important; }
  .rsx-tile{ width: 100%; height: auto; aspect-ratio: 603.2 / 465.9; margin-top: 10vw; transform: none; }

  .rsx-list{ padding: 14vw var(--g); min-height: 0; }
  .rsx-list-h{ font-size: 6.6vw; line-height: 1.2; padding-left: 0; }
  .rsx-bar{ flex-wrap: wrap; gap: 4vw; margin-top: 5vw; }
  .rsx-filter-btn{ height: 44px; padding: 0 18px; border-radius: 22px; font-size: 1rem; gap: 8px; }
  .rsx-filter-btn svg{ width: 16px; height: 16px; }
  .rsx-filter-count{ min-width: 20px; height: 20px; line-height: 20px; font-size: 11px; }
  .rsx-search{ flex-basis: 100%; height: 48px; padding-left: 4px; gap: 12px; }
  .rsx-search svg{ width: 20px; height: 20px; }
  .rsx-search input{ font-size: 1rem; }
  .rsx-search-clear{ width: 28px; height: 28px; }
  .rsx-panel-in{ grid-template-columns: 1fr; row-gap: 7vw; padding: 6vw 5vw; border-radius: 14px; margin-top: 4vw; }
  .rsx-group h4{ font-size: 0.75rem; }
  .rsx-check{ font-size: 1rem; line-height: 1.4; gap: 10px; min-height: 32px; }
  .rsx-box{ width: 18px; height: 18px; }
  .rsx-n{ font-size: 0.75rem; }
  .rsx-panel-actions{ align-items: flex-start; }
  .rsx-link-btn{ font-size: 0.75rem; }
  .rsx-status{ padding-left: 0; margin-top: 6vw; gap: 8px; }
  .rsx-count{ font-size: 0.8125rem; width: 100%; }
  .rsx-chip{ height: 30px; font-size: 0.6875rem; padding: 0 10px; gap: 8px; border-radius: 6px; }
  .rsx-chip i{ width: 9px; height: 9px; }

  .rsx-grid{ grid-template-columns: 1fr; gap: 5vw; padding-left: 0; margin-top: 5vw; }
  .rsx-card, .rsx-card--short{ min-height: 0; padding: 7vw 6vw; border-radius: 16px; }
  .rsx-pill{ height: 28px; padding: 0 9px; font-size: 0.75rem; }
  .rsx-date{ font-size: 0.8125rem; gap: 6px; margin-top: 4vw; }
  .rsx-date svg{ width: 18px; height: 18px; }
  .rsx-card-t{ font-size: 6vw; line-height: 1.2; margin-top: 3vw; }
  .rsx-card-d{ font-size: 1rem; line-height: 1.45; margin-top: 4vw; }
  .rsx-arrow{ padding-top: 7vw; height: auto; }
  .rsx-arrow svg{ width: 34px; height: 10px; }
  .rsx-card:hover .rsx-arrow svg{ width: 48px; }

  .rsx-rows{ margin-top: 6vw; }
  .rsx-row{ grid-template-columns: 1fr; row-gap: 5vw; padding: 7vw 0; margin-left: 0; }
  .rsx-media-tag{ font-size: 0.6875rem; left: 10px; top: 10px; padding: 2px 5px; }
  .rsx-play{ width: 56px; height: 56px; }
  .rsx-when b{ font-size: 16vw; } .rsx-when span{ font-size: 0.75rem; margin-top: 6px; }
  .rsx-when{ left: 16px; bottom: 14px; }
  .rsx-live{ font-size: 0.6875rem; right: 12px; top: 12px; gap: 6px; } .rsx-live i{ width: 7px; height: 7px; }
  .rsx-row-t, .rsx-row-t--s{ font-size: 6.4vw; line-height: 1.2; }
  .rsx-row-d{ font-size: 1rem; line-height: 1.45; margin-top: 3vw; }
  .rsx-btn{ height: 44px; padding: 0 16px; gap: 10px; border-radius: 8px; font-size: 1rem; margin-top: 5vw; }
  .rsx-btn svg{ width: 14px; height: 11px; }
  .rsx-meta{ font-size: 0.75rem; line-height: 1.5; margin-top: 4vw; }
  .rsx-empty{ padding: 12vw 5vw; border-radius: 14px; } .rsx-empty p{ font-size: 1.125rem; } .rsx-empty .rsx-link-btn{ margin-top: 3vw; }
  .rsx-pager{ margin-top: 10vw; gap: 4px; } .rsx-pg{ min-width: 40px; height: 40px; font-size: 0.8125rem; border-radius: 8px; }

  .rsx-sectag{ gap: 10px; }
  .rsx-upcoming{ padding: 14vw var(--g); }
  .rsx-up-t, .rsx-lib-t{ font-size: 7.4vw; line-height: 1.18; max-width: none; margin-top: 5vw; }
  .rsx-up-b{ max-width: none; margin-top: 5vw; }
  .rsx-library{ padding: 14vw var(--g); }
  .rsx-lib-cols{ grid-template-columns: 1fr; row-gap: 9vw; margin-top: 10vw; }
  .rsx-lib-col{ padding-top: 5vw; }
  .rsx-lib-h{ font-size: 6vw; line-height: 1.2; }
  .rsx-lib-d{ font-size: 1rem; line-height: 1.45; margin-top: 3vw; max-width: none; }
  .rsx-lib-go{ font-size: 0.75rem; margin-top: 4vw; gap: 8px; } .rsx-lib-go svg, .rsx-org-go svg{ width: 22px; height: 9px; }

  .rsx-org{ min-height: 0; padding: 14vw var(--g); }
  .rsx-org-list{ margin-top: 10vw; gap: 10vw; max-width: none; }
  .rsx-org-item{ padding-left: 18px; }
  .rsx-org-item .brk{ width: 8px; }
  .rsx-org-h{ font-size: 7vw; line-height: 1.2; flex-wrap: wrap; }
  .rsx-org-b{ font-size: 1rem; line-height: 1.45; margin-top: 3vw; }
  .rsx-org-go{ font-size: 0.75rem; gap: 8px; }
}

@media (prefers-reduced-motion: reduce){
  .rsx-tile, .rsx-card, .rsx-media img, .rsx-panel, .rsx-arrow svg{ transition: none; }
  .rsx-live i{ animation: none; }
}