← back to Rentv 2026
public/2026/d.html
1736 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RENTV · Western U.S. Commercial Real Estate · Magazine</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,800;1,600;1,700&family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* ─── Design tokens ─── */
:root {
--ink: #14171a;
--sub: #5b636b;
--hr: #e4e7ea;
--red: #c8102e;
--accent: #1a3a5c;
--gold: #b8860b;
--bg: #fafaf8;
--white: #ffffff;
--serif: 'Playfair Display', Georgia, serif;
--sans: 'Inter', system-ui, sans-serif;
--cols: 4;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--ink);
-webkit-font-smoothing: antialiased;
}
/* ─── Utility ─── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; }
/* ─── Top bar (issue dateline) ─── */
.top-bar {
background: var(--ink);
color: #fff;
font-family: var(--sans);
font-size: 11px;
font-weight: 500;
letter-spacing: .08em;
text-transform: uppercase;
text-align: center;
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.top-bar .dateline { opacity: .75; }
.top-bar .adv-link a {
color: #fff;
border: 1px solid rgba(255,255,255,.35);
border-radius: 2px;
padding: 3px 10px;
font-size: 10px;
letter-spacing: .1em;
transition: background .2s;
}
.top-bar .adv-link a:hover { background: rgba(255,255,255,.15); }
/* ─── Header ─── */
.site-header {
background: var(--white);
border-bottom: 2px solid var(--ink);
position: sticky;
top: 0;
z-index: 100;
}
.header-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 68px;
}
.header-left, .header-right {
display: flex;
align-items: center;
gap: 24px;
}
.header-right { justify-content: flex-end; }
.nav-btn {
background: none;
border: none;
cursor: pointer;
font-family: var(--sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ink);
padding: 6px 4px;
display: flex;
align-items: center;
gap: 7px;
transition: color .2s;
}
.nav-btn:hover { color: var(--red); }
.nav-btn .hamburger {
display: flex;
flex-direction: column;
gap: 4px;
}
.nav-btn .hamburger span {
display: block;
width: 18px;
height: 1.5px;
background: currentColor;
transition: background .2s;
}
.wordmark {
font-family: var(--serif);
font-size: 32px;
font-weight: 800;
letter-spacing: -.01em;
line-height: 1;
text-decoration: none;
}
.wordmark .tv { color: var(--red); }
/* ─── Ad leaderboard ─── */
.ad-leaderboard-wrap {
background: var(--white);
border-bottom: 1px solid var(--hr);
padding: 10px 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 36px;
}
.ad-label {
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: #aaa;
margin-bottom: 4px;
text-align: center;
}
/* ─── Section tabs ─── */
.section-tabs {
background: var(--white);
border-bottom: 1px solid var(--hr);
overflow-x: auto;
scrollbar-width: none;
}
.section-tabs::-webkit-scrollbar { display: none; }
.tabs-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
display: flex;
gap: 0;
}
.tab-link {
font-size: 12px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sub);
padding: 13px 18px;
border-bottom: 2px solid transparent;
white-space: nowrap;
transition: color .2s, border-color .2s;
text-decoration: none;
}
.tab-link:hover, .tab-link.active { color: var(--ink); border-bottom-color: var(--red); }
/* ─── Main container ─── */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
/* ─── Bento grid ─── */
.bento {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: auto;
gap: 2px;
background: var(--hr);
border: 2px solid var(--hr);
margin: 32px 0;
}
/* Bento cells */
.bento > * { background: var(--white); }
/* Feature story — spans cols 1-8, row 1-2 */
.bento-feature {
grid-column: 1 / 9;
grid-row: 1 / 3;
position: relative;
overflow: hidden;
min-height: 480px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.bento-feature .bg-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s ease;
}
.bento-feature:hover .bg-img { transform: scale(1.02); }
.bento-feature .overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.3) 55%, rgba(0,0,0,0) 100%);
}
.bento-feature .content {
position: relative;
z-index: 1;
padding: 36px 40px;
color: #fff;
}
.cat-tag {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--red);
background: rgba(255,255,255,.12);
border: 1px solid rgba(200,16,46,.5);
border-radius: 2px;
padding: 3px 9px;
margin-bottom: 14px;
}
.cat-tag.on-light {
color: var(--red);
background: rgba(200,16,46,.07);
border-color: rgba(200,16,46,.25);
}
.bento-feature h1 {
font-family: var(--serif);
font-size: clamp(22px, 2.5vw, 38px);
font-weight: 800;
line-height: 1.18;
margin-bottom: 12px;
color: #fff;
}
.dek {
font-size: 15px;
line-height: 1.55;
opacity: .85;
max-width: 560px;
}
.read-more {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
border-bottom: 1px solid rgba(255,255,255,.4);
padding-bottom: 2px;
transition: border-color .2s;
}
.read-more:hover { border-color: var(--red); color: var(--red); }
.read-more .arrow { font-size: 16px; }
/* Video of the Week — col 9-12, row 1-3 */
.bento-video-hero {
grid-column: 9 / 13;
grid-row: 1 / 4;
display: flex;
flex-direction: column;
position: relative;
}
.video-hero-label {
background: var(--ink);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
}
.video-hero-label .play-icon {
width: 20px;
height: 20px;
background: var(--red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 8px;
flex-shrink: 0;
}
.video-embed-wrap {
position: relative;
flex: 1;
min-height: 240px;
background: #000;
}
.video-embed-wrap iframe {
width: 100%;
height: 100%;
min-height: 240px;
border: none;
display: block;
}
.video-hero-meta {
padding: 16px 20px 20px;
border-top: 1px solid var(--hr);
}
.video-hero-meta h3 {
font-family: var(--serif);
font-size: 17px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
}
.video-hero-meta p {
font-size: 13px;
color: var(--sub);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.video-hero-meta .see-all {
display: inline-block;
margin-top: 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--red);
}
.video-hero-meta .see-all:hover { text-decoration: underline; }
/* Story tile — row 3, col 1-4 */
.bento-story {
grid-column: span 4;
display: flex;
flex-direction: column;
position: relative;
}
.bento-story .story-img {
aspect-ratio: 16/9;
overflow: hidden;
position: relative;
background: var(--hr);
}
.bento-story .story-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .35s ease;
}
.bento-story:hover .story-img img { transform: scale(1.04); }
.story-body {
padding: 20px 22px 22px;
flex: 1;
display: flex;
flex-direction: column;
}
.story-body h2 {
font-family: var(--serif);
font-size: 18px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 8px;
flex: 1;
}
.story-body .meta {
font-size: 11px;
color: var(--sub);
letter-spacing: .04em;
text-transform: uppercase;
margin-top: 10px;
}
/* Row 4 — ad tile + 2 stories */
.bento-ad-cell {
grid-column: span 4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 220px;
background: #f5f5f3;
padding: 16px;
gap: 8px;
}
.bento-ad-cell .ad-tag {
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: #bbb;
border-top: 1px solid #ddd;
padding-top: 6px;
width: 100%;
text-align: center;
}
/* Pull-quote tile */
.bento-pullquote {
grid-column: span 4;
background: var(--accent);
color: #fff;
padding: 36px 32px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
}
.bento-pullquote::before {
content: '\201C';
position: absolute;
top: -20px;
left: 16px;
font-family: var(--serif);
font-size: 160px;
line-height: 1;
color: rgba(255,255,255,.08);
pointer-events: none;
}
.bento-pullquote blockquote {
font-family: var(--serif);
font-size: clamp(17px, 1.5vw, 22px);
font-style: italic;
font-weight: 600;
line-height: 1.5;
position: relative;
z-index: 1;
margin-bottom: 16px;
}
.bento-pullquote cite {
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
opacity: .7;
font-style: normal;
}
/* Stats tile */
.bento-stats {
grid-column: span 4;
background: var(--ink);
color: #fff;
padding: 28px 28px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
}
.bento-stats .stats-label {
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 4px;
}
.stat-row {
display: flex;
flex-direction: column;
border-bottom: 1px solid rgba(255,255,255,.1);
padding-bottom: 14px;
}
.stat-row:last-child { border-bottom: none; padding-bottom: 0; }
.stat-number {
font-family: var(--serif);
font-size: 36px;
font-weight: 800;
line-height: 1;
color: #fff;
}
.stat-desc {
font-size: 12px;
color: rgba(255,255,255,.6);
margin-top: 4px;
line-height: 1.4;
}
/* ─── RENTV Originals strip ─── */
.section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
margin-bottom: 20px;
}
.section-title {
font-family: var(--serif);
font-size: 26px;
font-weight: 800;
line-height: 1;
display: flex;
align-items: center;
gap: 10px;
}
.section-title::after {
content: '';
display: block;
width: 32px;
height: 3px;
background: var(--red);
border-radius: 2px;
margin-left: 6px;
}
.see-all-link {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--red);
white-space: nowrap;
flex-shrink: 0;
}
.see-all-link:hover { text-decoration: underline; }
.originals-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.original-card {
position: relative;
border-radius: 3px;
overflow: hidden;
aspect-ratio: 16/10;
cursor: pointer;
background: var(--ink);
}
.original-card img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .75;
transition: opacity .3s, transform .4s;
}
.original-card:hover img { opacity: .6; transform: scale(1.03); }
.original-card .oc-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 55%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 18px;
color: #fff;
}
.original-card .oc-play {
width: 36px;
height: 36px;
background: var(--red);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 10px;
font-size: 13px;
transition: transform .2s;
}
.original-card:hover .oc-play { transform: scale(1.1); }
.original-card h4 {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 4px;
}
.original-card p {
font-size: 11px;
opacity: .75;
line-height: 1.4;
}
.original-card.fallback-gradient {
background: linear-gradient(135deg, #1a3a5c 0%, #0e2240 100%);
}
/* ─── The REview section ─── */
.review-section {
background: var(--ink);
color: #fff;
margin: 0 -24px;
padding: 44px 24px;
}
.review-inner {
max-width: 1400px;
margin: 0 auto;
}
.review-title {
font-family: var(--serif);
font-size: 11px;
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 6px;
}
.review-headline {
font-family: var(--serif);
font-size: 30px;
font-weight: 800;
color: #fff;
margin-bottom: 28px;
display: flex;
align-items: baseline;
gap: 10px;
}
.review-headline .italic { font-style: italic; color: rgba(255,255,255,.7); }
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.review-vid-card {
position: relative;
border-radius: 2px;
overflow: hidden;
background: #111;
cursor: pointer;
}
.review-vid-card .thumb-wrap {
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
}
.review-vid-card .thumb-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: .85;
transition: opacity .3s, transform .4s;
}
.review-vid-card:hover .thumb-wrap img { opacity: .7; transform: scale(1.03); }
.review-vid-card .play-btn {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.review-vid-card .play-btn span {
width: 48px;
height: 48px;
background: rgba(200,16,46,.92);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
box-shadow: 0 4px 20px rgba(0,0,0,.4);
transition: transform .2s, background .2s;
}
.review-vid-card:hover .play-btn span { transform: scale(1.12); background: var(--red); }
.review-vid-card .sponsored-flag {
position: absolute;
top: 10px;
left: 10px;
background: var(--gold);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 2px;
}
.review-vid-card .sponsor-hover {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0,0,0,.7);
color: rgba(255,255,255,.8);
font-size: 10px;
padding: 4px 10px;
border-radius: 2px;
opacity: 0;
transition: opacity .2s;
white-space: nowrap;
}
.review-vid-card:hover .sponsor-hover { opacity: 1; }
.review-vid-meta {
padding: 14px 16px 16px;
background: rgba(255,255,255,.04);
}
.review-vid-meta .cat-tag-dark {
font-size: 9px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 6px;
}
.review-vid-meta h4 {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ─── Departments ─── */
.departments {
margin: 48px 0;
}
.dept-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
border: 1px solid var(--hr);
}
.dept-col {
border-right: 1px solid var(--hr);
padding: 24px 22px 28px;
}
.dept-col:last-child { border-right: none; }
.dept-name {
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--ink);
}
.dept-story {
margin-bottom: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--hr);
}
.dept-story:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.dept-story a {
font-family: var(--serif);
font-size: 14px;
font-weight: 700;
line-height: 1.4;
color: var(--ink);
display: block;
margin-bottom: 5px;
transition: color .2s;
}
.dept-story a:hover { color: var(--red); }
.dept-story .dept-meta {
font-size: 11px;
color: var(--sub);
}
/* ─── Intelligence / More stories grid ─── */
.intelligence-section { margin: 48px 0; }
.grid-controls {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.grid-ctrl-group {
display: flex;
align-items: center;
gap: 8px;
background: var(--white);
border: 1px solid var(--hr);
border-radius: 3px;
padding: 7px 14px;
}
.grid-ctrl-group label {
font-size: 11px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sub);
white-space: nowrap;
}
.grid-ctrl-group select {
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
color: var(--ink);
background: transparent;
border: none;
cursor: pointer;
outline: none;
padding-right: 4px;
}
.grid-ctrl-group input[type=range] {
width: 90px;
accent-color: var(--red);
cursor: pointer;
}
.grid-ctrl-group .density-val {
font-size: 11px;
font-weight: 700;
color: var(--ink);
min-width: 18px;
}
.story-grid {
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
gap: 20px;
margin-top: 20px;
}
.story-card {
background: var(--white);
border: 1px solid var(--hr);
border-radius: 2px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .25s, transform .25s;
}
.story-card:hover {
box-shadow: 0 8px 32px rgba(0,0,0,.1);
transform: translateY(-2px);
}
.story-card .img-wrap {
aspect-ratio: 16/9;
overflow: hidden;
background: var(--hr);
position: relative;
}
.story-card .img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .4s;
}
.story-card:hover .img-wrap img { transform: scale(1.04); }
.story-card .img-wrap .no-img {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 28px;
font-style: italic;
color: rgba(255,255,255,.4);
}
.story-card .card-body {
padding: 16px 18px 18px;
flex: 1;
display: flex;
flex-direction: column;
}
.story-card .card-cat {
font-size: 9px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 7px;
}
.story-card h3 {
font-family: var(--serif);
font-size: 15px;
font-weight: 700;
line-height: 1.35;
flex: 1;
color: var(--ink);
transition: color .2s;
}
.story-card:hover h3 { color: var(--red); }
/* ─── Footer ─── */
.site-footer {
background: var(--ink);
color: #fff;
padding: 56px 0 32px;
margin-top: 64px;
}
.footer-inner {
max-width: 1400px;
margin: 0 auto;
padding: 0 24px;
}
.footer-top {
display: grid;
grid-template-columns: 1fr repeat(3, auto);
gap: 48px;
margin-bottom: 48px;
}
.footer-brand .wordmark {
font-size: 36px;
display: block;
margin-bottom: 12px;
}
.footer-brand p {
font-size: 13px;
color: rgba(255,255,255,.55);
line-height: 1.7;
max-width: 260px;
}
.footer-col h5 {
font-size: 10px;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--red);
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 13px;
color: rgba(255,255,255,.65);
margin-bottom: 10px;
transition: color .2s;
}
.footer-col a:hover { color: #fff; }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,.1);
padding-top: 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-bottom p {
font-size: 12px;
color: rgba(255,255,255,.4);
}
.footer-bottom .adv-btn {
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: #fff;
border: 1px solid rgba(255,255,255,.3);
border-radius: 2px;
padding: 8px 20px;
transition: background .2s;
}
.footer-bottom .adv-btn:hover { background: rgba(255,255,255,.1); }
/* ─── Footer band ad ─── */
.footer-ad-band {
background: #f0efe9;
border-top: 2px solid var(--hr);
padding: 16px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
/* ─── Switch chip ─── */
.switch-chip {
position: fixed;
bottom: 20px;
right: 20px;
background: var(--ink);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
padding: 9px 14px;
border-radius: 3px;
text-decoration: none;
z-index: 999;
box-shadow: 0 4px 16px rgba(0,0,0,.25);
transition: background .2s, transform .2s;
white-space: nowrap;
}
.switch-chip:hover { background: var(--red); transform: translateY(-1px); }
/* ─── Video lightbox ─── */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,.92);
z-index: 1000;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 16px;
}
.lightbox.active { display: flex; }
.lightbox iframe {
width: min(900px, 96vw);
aspect-ratio: 16/9;
border: none;
}
.lightbox-close {
position: absolute;
top: 20px;
right: 24px;
background: none;
border: none;
color: #fff;
font-size: 28px;
cursor: pointer;
opacity: .75;
transition: opacity .2s;
}
.lightbox-close:hover { opacity: 1; }
/* ─── Gradient fallbacks for missing images ─── */
.grad-1 { background: linear-gradient(135deg, #1a3a5c 0%, #c8102e 100%); }
.grad-2 { background: linear-gradient(135deg, #2d5016 0%, #1a3a5c 100%); }
.grad-3 { background: linear-gradient(135deg, #5c1a3a 0%, #1a2a5c 100%); }
.grad-4 { background: linear-gradient(135deg, #3a1a0e 0%, #5c3a1a 100%); }
.grad-5 { background: linear-gradient(135deg, #0e3a2a 0%, #1a3a5c 100%); }
/* ─── Responsive ─── */
@media (max-width: 1100px) {
.bento-feature { grid-column: 1 / 9; min-height: 380px; }
.bento-video-hero { grid-column: 9 / 13; }
.dept-grid { grid-template-columns: repeat(3, 1fr); }
.dept-col:nth-child(3) { border-right: none; }
.dept-col:nth-child(4) { border-top: 1px solid var(--hr); }
.dept-col:nth-child(5) { border-top: 1px solid var(--hr); border-right: none; }
.footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
.bento {
display: flex;
flex-direction: column;
background: var(--bg);
gap: 1px;
}
.bento-feature { min-height: 340px; }
.bento-video-hero { min-height: auto; }
.originals-strip { grid-template-columns: repeat(2, 1fr); }
.review-grid { grid-template-columns: 1fr; }
.dept-grid { grid-template-columns: repeat(2, 1fr); }
.dept-col { border-right: none; border-bottom: 1px solid var(--hr); }
.story-grid { --cols: 2 !important; }
.footer-top { grid-template-columns: 1fr; gap: 24px; }
.header-inner { grid-template-columns: auto 1fr auto; }
.wordmark { font-size: 26px; justify-self: center; }
.tabs-inner { gap: 0; }
.tab-link { padding: 12px 12px; font-size: 11px; }
}
@media (max-width: 520px) {
.originals-strip { grid-template-columns: 1fr; }
.story-grid { --cols: 1 !important; }
.bento-feature { min-height: 280px; }
.bento-feature h1 { font-size: 20px; }
.bento-feature .content { padding: 24px 20px; }
.dept-grid { grid-template-columns: 1fr; }
.footer-top { grid-template-columns: 1fr; }
.switch-chip { bottom: 12px; right: 12px; font-size: 10px; padding: 7px 10px; }
}
/* skeleton loader */
.skeleton {
background: linear-gradient(90deg, #e8e8e8 25%, #f0f0f0 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
border-radius: 2px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.loading-text {
color: var(--sub);
font-size: 13px;
text-align: center;
padding: 32px;
font-style: italic;
}
</style>
</head>
<body>
<!-- Top bar -->
<div class="top-bar">
<span class="dateline" id="dateline">Western U.S. Edition</span>
<span style="font-size:12px; letter-spacing:.04em; opacity:.5;">The Western U.S. Commercial Real Estate Authority Since 1998</span>
<span class="adv-link"><a href="/advertise">Advertise →</a></span>
</div>
<!-- Site header -->
<header class="site-header" role="banner">
<div class="header-inner">
<nav class="header-left" aria-label="Explore menu">
<button class="nav-btn" aria-label="Explore menu" aria-expanded="false">
<span class="hamburger" aria-hidden="true">
<span></span><span></span><span></span>
</span>
Explore
</button>
</nav>
<a href="/" class="wordmark" aria-label="RENTV home">REN<span class="tv">TV</span></a>
<nav class="header-right" aria-label="Sections menu">
<button class="nav-btn" aria-label="Sections menu">Sections ≡</button>
</nav>
</div>
</header>
<!-- Section tabs -->
<nav class="section-tabs" aria-label="Content sections">
<div class="tabs-inner">
<a href="/section/sales" class="tab-link active">Sales</a>
<a href="/section/leases" class="tab-link">Leases</a>
<a href="/section/financing" class="tab-link">Financing</a>
<a href="/section/development" class="tab-link">Development</a>
<a href="/section/multifamily" class="tab-link">Multifamily</a>
<a href="/section/industrial" class="tab-link">Industrial</a>
<a href="/section/retail" class="tab-link">Retail</a>
<a href="/review.html" class="tab-link" style="color:var(--red);">The REview ▶</a>
</div>
</nav>
<!-- Leaderboard ad -->
<div class="ad-leaderboard-wrap">
<div>
<div class="ad-label">Advertisement</div>
<div data-ad-slot="home-leaderboard" style="min-width:320px; min-height:32px;"></div>
</div>
</div>
<!-- Main content -->
<main>
<div class="container">
<!-- ── BENTO GRID ── -->
<section class="bento" aria-label="Top stories" id="bento-grid">
<!-- Feature story (col 1-8, row 1-2) -->
<article class="bento-feature" id="feature-story" aria-label="Lead story">
<div class="overlay"></div>
<div class="content">
<div class="cat-tag" id="feature-cat">Loading…</div>
<h1 id="feature-title">Loading top story…</h1>
<p class="dek" id="feature-dek"></p>
<a href="#" class="read-more" id="feature-link" aria-label="Read full story">
Read Story <span class="arrow">→</span>
</a>
</div>
</article>
<!-- Video of the week (col 9-12, row 1-3) -->
<aside class="bento-video-hero" aria-label="Video of the Week">
<div class="video-hero-label">
<span class="play-icon" aria-hidden="true">▶</span>
Video of the Week
</div>
<div class="video-embed-wrap" id="votw-embed">
<div class="loading-text">Loading video…</div>
</div>
<div class="video-hero-meta" id="votw-meta">
<h3 id="votw-title"> </h3>
<p id="votw-desc"> </p>
<a href="https://www.rentvreview.com" class="see-all" target="_blank" rel="noopener">
Watch on The REview →
</a>
</div>
</aside>
<!-- Story 2 (row 3, col 1-4) -->
<article class="bento-story" id="story-2">
<div class="story-img"><div class="no-img grad-2" aria-hidden="true"><span>RENTV</span></div></div>
<div class="story-body">
<div class="cat-tag on-light" id="s2-cat"> </div>
<h2><a href="#" id="s2-link"> </a></h2>
</div>
</article>
<!-- Story 3 (row 3, col 5-8) -->
<article class="bento-story" id="story-3">
<div class="story-img"><div class="no-img grad-3" aria-hidden="true"><span>RENTV</span></div></div>
<div class="story-body">
<div class="cat-tag on-light" id="s3-cat"> </div>
<h2><a href="#" id="s3-link"> </a></h2>
</div>
</article>
<!-- Pull-quote -->
<div class="bento-pullquote" role="complementary" aria-label="Editor's pull quote">
<blockquote>
"The Western U.S. market is where capital decisions get made first — and RENTV is where the market reads about it."
</blockquote>
<cite>Steven Bloom, Founder & Publisher</cite>
</div>
<!-- Story 4 (row 4, col 1-4) -->
<article class="bento-story" id="story-4">
<div class="story-img"><div class="no-img grad-4" aria-hidden="true"><span>RENTV</span></div></div>
<div class="story-body">
<div class="cat-tag on-light" id="s4-cat"> </div>
<h2><a href="#" id="s4-link"> </a></h2>
</div>
</article>
<!-- In-feed ad -->
<div class="bento-ad-cell" role="complementary" aria-label="Advertisement">
<div data-ad-slot="home-infeed-1" style="width:100%;"></div>
<div class="ad-tag">Advertisement · <a href="/advertise" style="color:#999;">Sponsor this space →</a></div>
</div>
<!-- Stats tile -->
<div class="bento-stats" aria-label="Market statistics">
<div class="stats-label">Western Market · 2026</div>
<div class="stat-row">
<div class="stat-number">$1.6B</div>
<div class="stat-desc">BlackRock’s SoCal multifamily portfolio trade</div>
</div>
<div class="stat-row">
<div class="stat-number">5.9msf</div>
<div class="stat-desc">PCCP & Stonemont industrial portfolio acquisition</div>
</div>
<div class="stat-row">
<div class="stat-number">$107M</div>
<div class="stat-desc">Seattle office & hotel refi landmark deal</div>
</div>
</div>
</section>
<!-- /bento -->
<!-- ── RENTV ORIGINALS ── -->
<section class="originals-section" aria-labelledby="originals-heading">
<div class="section-header">
<h2 class="section-title" id="originals-heading">RENTV Originals</h2>
<a href="/vid/" class="see-all-link" aria-label="See all RENTV original videos">See all →</a>
</div>
<div class="originals-strip" id="originals-strip" role="list">
<div class="loading-text" style="grid-column:1/-1;">Loading originals…</div>
</div>
</section>
</div><!-- /container -->
<!-- ── THE REVIEW SECTION ── -->
<section class="review-section" aria-labelledby="review-heading">
<div class="review-inner">
<div class="review-title">From The REview — rentvreview.com</div>
<h2 class="review-headline" id="review-heading">
<span>The REview</span>
<span class="italic">— face to face with the dealmakers</span>
</h2>
<div class="review-grid" id="review-grid" role="list">
<div class="loading-text" style="color:rgba(255,255,255,.5);">Loading videos…</div>
</div>
</div>
</section>
<div class="container">
<!-- ── DEPARTMENTS ── -->
<section class="departments" aria-labelledby="dept-heading">
<div class="section-header">
<h2 class="section-title" id="dept-heading">Departments</h2>
</div>
<div class="dept-grid" id="dept-grid" role="navigation" aria-label="Story departments">
<div class="loading-text" style="grid-column:1/-1;">Loading departments…</div>
</div>
</section>
<!-- ── INTELLIGENCE / MORE STORIES ── -->
<section class="intelligence-section" aria-labelledby="intel-heading">
<div class="section-header">
<h2 class="section-title" id="intel-heading">More Stories</h2>
<div class="grid-controls" role="group" aria-label="Grid controls">
<div class="grid-ctrl-group">
<label for="story-sort">Sort</label>
<select id="story-sort" aria-label="Sort stories">
<option value="newest">Newest</option>
<option value="cat">Category</option>
<option value="title">Title A→Z</option>
</select>
</div>
<div class="grid-ctrl-group">
<label for="density-slider">Columns</label>
<input
type="range"
id="density-slider"
min="1" max="6" step="1" value="4"
aria-label="Column density"
aria-valuemin="1" aria-valuemax="6"
>
<span class="density-val" id="density-val" aria-live="polite">4</span>
</div>
</div>
</div>
<div class="story-grid" id="story-grid" role="list">
<div class="loading-text" style="grid-column:1/-1;">Loading stories…</div>
</div>
</section>
</div><!-- /container -->
</main>
<!-- Footer band ad -->
<div class="footer-ad-band" role="complementary" aria-label="Advertisement">
<div class="ad-label">Advertisement</div>
<div data-ad-slot="footer-band"></div>
</div>
<!-- Footer -->
<footer class="site-footer" role="contentinfo">
<div class="footer-inner">
<div class="footer-top">
<div class="footer-brand">
<a href="/" class="wordmark" aria-label="RENTV home">REN<span class="tv">TV</span></a>
<p>The Western U.S. commercial real estate authority since 1998. Covering sales, leases, financing, development, and the people making it happen.</p>
</div>
<div class="footer-col">
<h5>Sections</h5>
<a href="/section/sales">Sales</a>
<a href="/section/leases">Leases</a>
<a href="/section/financing">Financing</a>
<a href="/section/development">Development</a>
<a href="/section/multifamily">Multifamily</a>
<a href="/section/industrial">Industrial</a>
<a href="/section/retail">Retail</a>
</div>
<div class="footer-col">
<h5>Intelligence</h5>
<a href="/market-pulse.html">Market Pulse</a>
<a href="/deals.html">Deal Log</a>
<a href="/markets.html">Markets</a>
<a href="https://www.rentvreview.com" target="_blank" rel="noopener">The REview</a>
<a href="/re-search.html">RE Search</a>
</div>
<div class="footer-col">
<h5>Company</h5>
<a href="/about.html">About RENTV</a>
<a href="/advertise.html">Advertise</a>
<a href="/subscribe.html">Newsletter</a>
<a href="/syndicate.html">Syndication</a>
<a href="/press/">Press</a>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 RENTV. All rights reserved. Western U.S. Edition.</p>
<a href="/advertise.html" class="adv-btn">Advertise with RENTV →</a>
</div>
</div>
</footer>
<!-- Switch chip -->
<a href="/2026/" class="switch-chip" aria-label="Switch between 2026 templates">◆ 2026 Templates — switch</a>
<!-- Video lightbox -->
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-label="Video player">
<button class="lightbox-close" id="lightbox-close" aria-label="Close video">×</button>
<iframe id="lightbox-iframe" src="" allow="autoplay; encrypted-media" allowfullscreen title="Video player"></iframe>
</div>
<!-- Ad system -->
<script src="/ad-slot.js" defer></script>
<script>
/* ─── Utility ─── */
function esc(str) {
const d = document.createElement('div');
d.textContent = str;
return d.innerHTML;
}
function gradClass(i) {
return 'grad-' + ((i % 5) + 1);
}
/* ─── Dateline ─── */
(function() {
const el = document.getElementById('dateline');
const d = new Date();
const fmt = d.toLocaleDateString('en-US', { year:'numeric', month:'long', day:'numeric' });
if (el) el.textContent = 'Western U.S. Edition · ' + fmt;
})();
/* ─── Lightbox ─── */
const lightbox = document.getElementById('lightbox');
const lbIframe = document.getElementById('lightbox-iframe');
const lbClose = document.getElementById('lightbox-close');
function openLightbox(embedUrl) {
lbIframe.src = embedUrl + '?autoplay=1&rel=0';
lightbox.classList.add('active');
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
lightbox.classList.remove('active');
lbIframe.src = '';
document.body.style.overflow = '';
}
if (lbClose) lbClose.addEventListener('click', closeLightbox);
lightbox.addEventListener('click', function(e) { if (e.target === lightbox) closeLightbox(); });
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeLightbox(); });
/* ─── Sponsored flag helper ─── */
function sponsoredFlag(sp) {
if (!sp) return '';
if (sp.status === 'sold' && sp.advertiser) {
return '<span class="sponsored-flag">★ SPONSORED · ' + esc(sp.advertiser) + '</span>';
}
return '<a href="/advertise?video=' + encodeURIComponent(sp.uid||'') + '" class="sponsor-hover" tabindex="-1" aria-label="Sponsor this video">Sponsor this →</a>';
}
/* ─── Sponsorship inventory map (uid → {status, advertiser, uid, price_monthly}) ─── */
let SPONSOR_BY_UID = {};
async function loadSponsorMap() {
try {
const r = await fetch('/api/ad/inventory');
const j = await r.json();
(j.items || []).forEach(function(it) {
if (it.uid) SPONSOR_BY_UID[it.uid] = Object.assign({ uid: it.uid }, it.sponsorship || {});
});
} catch (e) { console.warn('ad inventory failed:', e); }
}
// Resolve a /api/videos row to its ad-inventory sponsorship record.
function sponsorForVideo(v) {
if (!v) return null;
const uid = v.uid || (v.id != null ? 'yt-' + v.id : null);
return (uid && SPONSOR_BY_UID[uid]) || null;
}
/* ─── Load videos (pinned + REview grid) ─── */
async function loadVideos() {
try {
await loadSponsorMap();
const r = await fetch('/api/videos');
const data = await r.json();
const items = data.items || [];
const pinned = items.find(v => v.pinned) || items[0];
const reviewItems = items.filter(v => !v.pinned && v.yt).slice(0, 3);
// Video of the week
if (pinned) {
const embedWrap = document.getElementById('votw-embed');
if (pinned.embed || pinned.yt) {
const embedSrc = pinned.embed || ('https://www.youtube.com/embed/' + pinned.yt);
embedWrap.innerHTML = '<iframe src="' + embedSrc + '?rel=0" allow="accelerometer; autoplay; encrypted-media; gyroscope" allowfullscreen title="' + esc(pinned.title) + '" loading="lazy"></iframe>';
} else {
embedWrap.innerHTML = '<div style="display:flex;align-items:center;justify-content:center;height:100%;color:#fff;font-family:var(--serif);font-style:italic;font-size:20px;">RENTV</div>';
}
const t = document.getElementById('votw-title');
const d = document.getElementById('votw-desc');
if (t) t.textContent = pinned.title;
if (d) d.innerHTML = esc(pinned.desc || '') + ' ' + sponsoredFlag(sponsorForVideo(pinned));
}
// REview grid
const reviewGrid = document.getElementById('review-grid');
if (reviewItems.length) {
reviewGrid.innerHTML = reviewItems.map(function(v, i) {
const embedSrc = v.embed || ('https://www.youtube.com/embed/' + v.yt);
return '<article class="review-vid-card" role="listitem">' +
'<div class="thumb-wrap">' +
(v.thumb ? '<img src="' + esc(v.thumb) + '" alt="' + esc(v.title) + '" loading="lazy">' : '<div class="' + gradClass(i) + '" style="width:100%;height:100%;"></div>') +
'<div class="play-btn"><span aria-label="Play video">▶</span></div>' +
'</div>' +
'<div class="review-vid-meta">' +
'<div class="cat-tag-dark">' + esc(v.cat || 'Video') + '</div>' +
'<h4>' + esc(v.title) + '</h4>' +
sponsoredFlag(sponsorForVideo(v)) +
'</div>' +
'</article>';
}).join('');
reviewGrid.querySelectorAll('.review-vid-card').forEach(function(card, i) {
const v = reviewItems[i];
if (!v) return;
const embedSrc = v.embed || ('https://www.youtube.com/embed/' + v.yt);
card.addEventListener('click', function() { openLightbox(embedSrc); });
card.setAttribute('tabindex', '0');
card.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLightbox(embedSrc); } });
});
} else {
reviewGrid.innerHTML = '<div class="loading-text" style="color:rgba(255,255,255,.5);">No videos available.</div>';
}
} catch(e) {
console.warn('Videos failed:', e);
}
}
/* ─── Load ad inventory for originals strip ─── */
async function loadOriginals() {
const strip = document.getElementById('originals-strip');
try {
// Use the /api/videos RENTV Originals items first, fall back to inventory
const r = await fetch('/api/videos');
const data = await r.json();
const originals = (data.items || []).filter(function(v) { return v.cat === 'RENTV Originals' || v.id && v.id.startsWith('orig-'); });
if (!originals.length) {
strip.innerHTML = '<p class="loading-text">No originals available.</p>';
return;
}
strip.innerHTML = originals.map(function(v, i) {
const hasMp4 = v.mp4;
const hasThumb = v.thumb;
const embedSrc = v.embed || (v.yt ? 'https://www.youtube.com/embed/' + v.yt : null);
const cardClass = 'original-card' + (hasThumb ? '' : ' fallback-gradient');
return '<div class="' + cardClass + '" role="listitem" tabindex="0" aria-label="' + esc(v.title) + '">' +
(hasThumb ? '<img src="' + esc(v.thumb) + '" alt="' + esc(v.title) + '" loading="lazy">' : '') +
'<div class="oc-overlay">' +
'<div class="oc-play" aria-hidden="true">▶</div>' +
'<h4>' + esc(v.title) + '</h4>' +
'<p>' + esc(v.desc || '') + '</p>' +
'</div>' +
'</div>';
}).join('');
strip.querySelectorAll('.original-card').forEach(function(card, i) {
const v = originals[i];
if (!v) return;
const embedSrc = v.embed || (v.yt ? 'https://www.youtube.com/embed/' + v.yt : null);
if (embedSrc) {
card.addEventListener('click', function() { openLightbox(embedSrc); });
card.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openLightbox(embedSrc); } });
card.style.cursor = 'pointer';
} else if (v.mp4) {
card.addEventListener('click', function() {
window.open(v.mp4, '_blank');
});
}
});
} catch(e) {
strip.innerHTML = '<p class="loading-text">Originals unavailable.</p>';
console.warn('Originals failed:', e);
}
}
/* ─── Load news ─── */
let allNews = [];
function catGradient(cat) {
const map = { 'Multifamily': 'grad-1', 'Financing': 'grad-2', 'Sales': 'grad-3', 'Industrial': 'grad-4', 'Leases': 'grad-5', 'Retail': 'grad-3', 'Development': 'grad-2' };
return map[cat] || 'grad-1';
}
async function loadNews() {
try {
const r = await fetch('/api/news');
const data = await r.json();
allNews = data.items || [];
if (!allNews.length) return;
// Feature story (item 0)
const feat = allNews[0];
const featEl = document.getElementById('feature-story');
const catEl = document.getElementById('feature-cat');
const titleEl= document.getElementById('feature-title');
const dekEl = document.getElementById('feature-dek');
const linkEl = document.getElementById('feature-link');
if (catEl) catEl.textContent = feat.cat || 'News';
if (titleEl) titleEl.textContent = feat.title;
if (linkEl) { linkEl.href = '/news/' + feat.id; }
if (feat.image) {
const img = document.createElement('img');
img.src = feat.image;
img.alt = feat.title;
img.className = 'bg-img';
img.setAttribute('aria-hidden', 'true');
img.loading = 'eager';
featEl.insertBefore(img, featEl.firstChild);
} else {
featEl.style.background = 'linear-gradient(135deg, #1a3a5c 0%, #0a1a30 100%)';
}
// Story 2 (item 1)
fillBentoStory('story-2', 's2-cat', 's2-link', allNews[1]);
// Story 3 (item 2)
fillBentoStory('story-3', 's3-cat', 's3-link', allNews[2]);
// Story 4 (item 3)
fillBentoStory('story-4', 's4-cat', 's4-link', allNews[3]);
// Departments
buildDepartments(allNews);
// More stories grid (items 4+)
renderStoryGrid(allNews);
} catch(e) {
console.warn('News failed:', e);
document.getElementById('feature-title').textContent = 'Unable to load stories.';
}
}
function fillBentoStory(storyId, catId, linkId, item) {
if (!item) return;
const storyEl = document.getElementById(storyId);
const catEl = document.getElementById(catId);
const linkEl = document.getElementById(linkId);
if (catEl) catEl.textContent = item.cat || 'News';
if (linkEl) { linkEl.href = '/news/' + item.id; linkEl.textContent = item.title; }
const imgWrap = storyEl ? storyEl.querySelector('.story-img') : null;
if (imgWrap) {
if (item.image) {
imgWrap.innerHTML = '<img src="' + esc(item.image) + '" alt="' + esc(item.title) + '" loading="lazy">';
} else {
imgWrap.innerHTML = '<div class="no-img ' + catGradient(item.cat) + '" aria-hidden="true"><span>RENTV</span></div>';
}
}
}
/* ─── Departments ─── */
function buildDepartments(items) {
const deptGrid = document.getElementById('dept-grid');
const depts = ['Sales', 'Financing', 'Development', 'Multifamily', 'Industrial'];
const byDept = {};
depts.forEach(function(d) { byDept[d] = []; });
items.forEach(function(item) {
const c = item.cat;
if (byDept[c]) byDept[c].push(item);
else if (c === 'Retail' && byDept['Sales']) byDept['Sales'].push(item);
else if (c === 'Leases' && byDept['Industrial']) byDept['Industrial'].push(item);
});
deptGrid.innerHTML = depts.map(function(dept) {
const stories = byDept[dept].slice(0, 3);
const storyHtml = stories.length
? stories.map(function(s) {
return '<div class="dept-story">' +
'<a href="/news/' + esc(s.id) + '">' + esc(s.title) + '</a>' +
'<span class="dept-meta">' + esc(s.cat) + '</span>' +
'</div>';
}).join('')
: '<div class="dept-story"><span class="dept-meta" style="color:#bbb;">No recent stories</span></div>';
return '<div class="dept-col" role="listitem">' +
'<div class="dept-name">' + esc(dept) + '</div>' +
storyHtml +
'</div>';
}).join('');
}
/* ─── Story grid with sort + density ─── */
function renderStoryGrid(items) {
const grid = document.getElementById('story-grid');
const sort = document.getElementById('story-sort');
const density = document.getElementById('density-slider');
const densityVal = document.getElementById('density-val');
// Restore from localStorage
const savedSort = localStorage.getItem('rentv-story-sort') || 'newest';
const savedDensity = parseInt(localStorage.getItem('rentv-story-density') || '4', 10);
if (sort) sort.value = savedSort;
if (density) density.value = savedDensity;
if (densityVal) densityVal.textContent = savedDensity;
document.documentElement.style.setProperty('--cols', savedDensity);
function getSorted() {
const mode = sort ? sort.value : 'newest';
const list = items.slice(4); // skip bento items
if (mode === 'cat') return list.slice().sort(function(a,b) { return (a.cat||'').localeCompare(b.cat||''); });
if (mode === 'title') return list.slice().sort(function(a,b) { return a.title.localeCompare(b.title); });
return list; // newest = default order
}
function render() {
const sorted = getSorted();
if (!sorted.length) {
grid.innerHTML = '<p class="loading-text">No stories available.</p>';
return;
}
grid.innerHTML = sorted.map(function(item, i) {
const hasImg = !!item.image;
return '<article class="story-card" role="listitem">' +
'<a href="/news/' + esc(item.id) + '" aria-label="' + esc(item.title) + '">' +
'<div class="img-wrap">' +
(hasImg
? '<img src="' + esc(item.image) + '" alt="' + esc(item.title) + '" loading="lazy">'
: '<div class="no-img ' + catGradient(item.cat) + '" aria-hidden="true"><span style="font-family:var(--serif);font-size:22px;font-style:italic;color:rgba(255,255,255,.35);">RENTV</span></div>'
) +
'</div>' +
'<div class="card-body">' +
'<div class="card-cat">' + esc(item.cat || 'News') + '</div>' +
'<h3>' + esc(item.title) + '</h3>' +
'</div>' +
'</a>' +
'</article>';
}).join('');
}
render();
if (sort) {
sort.addEventListener('change', function() {
localStorage.setItem('rentv-story-sort', sort.value);
render();
});
}
if (density) {
density.addEventListener('input', function() {
const v = parseInt(density.value, 10);
document.documentElement.style.setProperty('--cols', v);
if (densityVal) densityVal.textContent = v;
localStorage.setItem('rentv-story-density', v);
});
}
}
/* ─── Init ─── */
loadNews();
loadVideos();
loadOriginals();
</script>
<script src="/2026/elements.js" defer></script>
<script src="/template-toggle.js" defer></script>
</body>
</html>