
:root{
  --ryl-nr-red:#e51524;
  --ryl-nr-red2:#ff2d3d;
  --ryl-nr-bg:#050506;
  --ryl-nr-card:#0b0c0f;
  --ryl-nr-line:#25272d;
  --ryl-nr-text:#f7f7f8;
  --ryl-nr-muted:#a7a9af;
}
body{background:#000!important}
.ryl-nr-shell{background:#000;color:var(--ryl-nr-text);min-height:100vh;padding-bottom:72px}
.ryl-nr-feed{max-width:1380px;margin:0 auto;padding:22px 28px 40px}
.ryl-nr-filters{
  display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;
  padding:4px 2px 10px;position:sticky;top:0;z-index:30;background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px)
}
.ryl-nr-filters::-webkit-scrollbar{display:none}
.ryl-nr-filters button{
  flex:0 0 auto;border:1px solid #292b30;background:#111216;color:#ddd;
  border-radius:999px;padding:9px 18px;font-size:13px;font-weight:800;cursor:pointer
}
.ryl-nr-filters button:hover,.ryl-nr-filters button.is-active{
  background:linear-gradient(180deg,#f3202f,#bd0915);border-color:#ff3340;color:#fff
}
.ryl-nr-purpose{
  text-align:center;color:#c9c9cc;margin:7px 0 21px;font-size:15px;letter-spacing:.01em
}
.ryl-nr-featured{margin-bottom:18px}
.ryl-nr-card{
  position:relative;border:1px solid var(--ryl-nr-line);overflow:hidden;background:#111;
  color:#fff;text-align:left;padding:0;cursor:pointer;border-radius:10px;isolation:isolate;
  background-image:var(--ryl-nr-bg,linear-gradient(135deg,#16181d,#08090b));
  background-position:center;background-size:cover
}
.ryl-nr-card:focus-visible{outline:2px solid var(--ryl-nr-red2);outline-offset:2px}
.ryl-nr-card::before{
  content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 90% 18%,rgba(229,21,36,.34),transparent 30%),
  linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.86));z-index:-1
}
.ryl-nr-card-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 26%,rgba(0,0,0,.92) 100%)}
.ryl-nr-card-content{position:absolute;inset:auto 0 0;padding:18px;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
.ryl-nr-kicker{color:#ff2736;font-size:10px;font-weight:950;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ryl-nr-card strong{font-size:19px;line-height:1.12;text-transform:uppercase;max-width:95%;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.ryl-nr-card small{color:#d4d4d6;margin-top:9px;font-size:12px;line-height:1.4}
.ryl-nr-time{opacity:.8}
.ryl-nr-read{
  display:inline-flex;margin-top:14px;padding:9px 14px;border-radius:5px;
  background:var(--ryl-nr-red);font-size:11px;font-weight:900;letter-spacing:.04em
}
.ryl-nr-featured-card{width:100%;aspect-ratio:2.3/1;min-height:290px}
.ryl-nr-featured-card .ryl-nr-card-content{max-width:620px;padding:30px}
.ryl-nr-featured-card strong{font-size:34px}
.ryl-nr-featured-card small{font-size:14px}
.ryl-nr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ryl-nr-grid>.ryl-nr-card{aspect-ratio:1/1}
.ryl-nr-more-wrap{text-align:center;padding:28px 0 0}
.ryl-nr-more{
  border:1px solid var(--ryl-nr-red);background:transparent;color:#e8e8ea;border-radius:999px;
  min-width:300px;padding:12px 20px;font-size:12px;font-weight:850;letter-spacing:.18em;cursor:pointer
}
.ryl-nr-more:hover{background:#120306}
.ryl-nr-more[disabled]{opacity:.45;cursor:wait}

/* Modal */
.ryl-nr-modal[hidden]{display:none!important}
.ryl-nr-modal{position:fixed;inset:0;z-index:999999;display:grid;place-items:center;padding:22px}
.ryl-nr-modal-backdrop{position:absolute;inset:0;border:0;background:rgba(0,0,0,.78);backdrop-filter:blur(8px);cursor:pointer}
.ryl-nr-modal-panel{
  position:relative;z-index:2;width:min(760px,94vw);max-height:90vh;overflow:auto;
  background:#07080a;border:1px solid #5a5d64;border-radius:17px;color:#fff;
  box-shadow:0 35px 90px rgba(0,0,0,.65)
}
.ryl-nr-modal-close{
  position:sticky;float:right;top:10px;margin:10px 10px -52px 0;z-index:8;width:38px;height:38px;border:0;
  border-radius:50%;background:rgba(0,0,0,.72);color:#fff;font-size:28px;line-height:1;cursor:pointer
}
.ryl-nr-modal-hero{height:330px;background:#111 center/cover no-repeat;border-bottom:1px solid #272a30}
.ryl-nr-modal-body{padding:27px 30px 34px}
.ryl-nr-modal-kicker{display:inline-block;background:#cf101c;color:#fff;border-radius:4px;padding:5px 7px;font-size:10px;font-weight:900;letter-spacing:.05em}
.ryl-nr-modal-body h2{color:#fff!important;font-size:34px;line-height:1.05;margin:13px 0 9px!important}
.ryl-nr-modal-deck{color:#c8c9cd!important;font-size:15px;line-height:1.5;margin:0 0 14px}
.ryl-nr-modal-meta{display:flex;gap:14px;flex-wrap:wrap;color:#a5a7ad;font-size:12px;border-bottom:1px solid #282a30;padding-bottom:18px;margin-bottom:18px}
.ryl-nr-modal-copy,.ryl-nr-modal-copy p,.ryl-nr-modal-copy li{color:#e9e9ea!important;font-size:16px;line-height:1.72}
.ryl-nr-modal-copy a{color:#ff4a57}
.ryl-nr-modal-copy img{max-width:100%;height:auto}
.ryl-nr-modal-source{border-top:1px solid #282a30;margin-top:24px;padding-top:16px;font-size:12px;color:#9fa2aa}
.ryl-nr-modal-source a{color:#ff4a57;margin-left:6px}
body.ryl-nr-modal-open{overflow:hidden}

/* tablet */
@media(max-width:900px){
  .ryl-nr-feed{padding:16px 16px 36px}
  .ryl-nr-featured-card{aspect-ratio:1.65/1}
  .ryl-nr-featured-card strong{font-size:27px}
  .ryl-nr-grid{gap:9px}
  .ryl-nr-card-content{padding:13px}
  .ryl-nr-card strong{font-size:15px}
}

/* Instagram-style MOBILE: exactly 3 across */
@media(max-width:600px){
  .ryl-nr-feed{padding:12px 8px 28px}
  .ryl-nr-filters{margin:0 -8px;padding:4px 8px 9px}
  .ryl-nr-filters button{padding:8px 14px;font-size:11px}
  .ryl-nr-purpose{font-size:12px;line-height:1.4;margin:6px 12px 14px}
  .ryl-nr-featured{margin:0 0 7px}
  .ryl-nr-featured-card{aspect-ratio:1.75/1;min-height:210px;border-radius:7px}
  .ryl-nr-featured-card .ryl-nr-card-content{padding:18px}
  .ryl-nr-featured-card strong{font-size:22px}
  .ryl-nr-featured-card small{font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ryl-nr-read{padding:7px 10px;font-size:9px;margin-top:9px}

  .ryl-nr-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .ryl-nr-grid>.ryl-nr-card{aspect-ratio:1/1;border-radius:3px;border-color:#111}
  .ryl-nr-grid .ryl-nr-card-content{padding:7px 6px}
  .ryl-nr-grid .ryl-nr-kicker{font-size:6px;margin-bottom:3px}
  .ryl-nr-grid .ryl-nr-card strong{
    font-size:9px;line-height:1.03;max-width:100%;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden
  }
  .ryl-nr-grid .ryl-nr-time{display:none}
  .ryl-nr-more{min-width:250px;padding:11px 16px;font-size:10px}

  .ryl-nr-modal{padding:0;align-items:end}
  .ryl-nr-modal-panel{width:100vw;max-height:94vh;border-radius:18px 18px 0 0}
  .ryl-nr-modal-hero{height:240px}
  .ryl-nr-modal-body{padding:22px 19px 30px}
  .ryl-nr-modal-body h2{font-size:28px!important}
  .ryl-nr-modal-copy,.ryl-nr-modal-copy p,.ryl-nr-modal-copy li{font-size:16px;line-height:1.65}
}
