:root { --rp-ink:#10233b; --rp-muted:#5e6e7e; --rp-line:rgba(18,48,74,.13); --rp-teal:#0f766e; --rp-warm:#fff9f2; }
* { box-sizing:border-box; }
.research-posts-main { padding-top:var(--site-topbar-offset,102px); color:var(--rp-ink); }
.research-posts-shell { width:min(calc(100% - 40px),1080px); margin:0 auto; }
.research-posts-hero { position:relative; overflow:hidden; padding:clamp(64px,9vw,112px) 0 64px; background:radial-gradient(circle at 86% 20%,rgba(22,163,145,.15),transparent 30%),linear-gradient(135deg,#fffaf4 0%,#f1fbf9 100%); border-bottom:1px solid var(--rp-line); }
.research-posts-hero::after { content:""; position:absolute; width:340px; height:190px; right:-80px; bottom:-95px; border:34px solid rgba(201,123,82,.1); border-radius:50%; transform:rotate(-12deg); }
.research-posts-kicker,.research-posts-eyebrow { margin:0 0 12px; color:var(--rp-teal); font-size:.76rem; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.research-posts-hero h1 { max-width:800px; margin:0; font-size:clamp(2.6rem,6vw,5.3rem); line-height:.98; letter-spacing:-.045em; }
.research-posts-intro { max-width:760px; margin:24px 0; color:var(--rp-muted); font-size:clamp(1.05rem,2vw,1.27rem); line-height:1.72; }
.research-posts-principles { display:flex; flex-wrap:wrap; gap:10px; }
.research-posts-principles span { padding:8px 12px; border:1px solid rgba(15,118,110,.18); border-radius:999px; background:rgba(255,255,255,.7); color:#365663; font-size:.83rem; font-weight:750; }
.research-posts-content { padding:70px 0 84px; background:#fff; }
.research-posts-heading-row { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:28px; }
.research-posts-heading-row h2,.research-posts-disclaimer h2 { margin:0; font-size:clamp(1.8rem,3vw,2.6rem); letter-spacing:-.025em; }
.research-posts-count { margin:0; color:var(--rp-muted); font-weight:700; }
.research-posts-list { display:grid; gap:22px; }
.research-post-card { display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; padding:30px; border:1px solid var(--rp-line); border-radius:18px; background:linear-gradient(145deg,#fff 0%,#fffcf8 100%); box-shadow:0 18px 48px rgba(20,45,68,.07); }
.research-post-date { display:flex; flex-direction:column; gap:4px; color:var(--rp-teal); font-weight:800; }
.research-post-date strong { color:var(--rp-ink); font-size:1.15rem; }
.research-post-side { display:flex; min-width:0; flex-direction:column; gap:18px; align-items:stretch; }
.research-post-card h3 { margin:0 0 10px; font-size:clamp(1.3rem,2.5vw,1.75rem); line-height:1.2; letter-spacing:-.02em; }
.research-post-thumbnail-button { position:relative; width:100%; margin:0; padding:7px; border:1px solid rgba(137,101,72,.25); border-radius:14px; background:linear-gradient(145deg,#fff 0%,#f4eee6 100%); box-shadow:0 12px 28px rgba(20,45,68,.12),0 2px 7px rgba(123,85,56,.08); cursor:zoom-in; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.research-post-thumbnail-button::after { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.8); border-radius:8px; pointer-events:none; }
.research-post-thumbnail { display:block; width:100%; height:auto; border-radius:8px; background:#fff; transition:transform .2s ease; }
.research-post-thumbnail-button:hover { border-color:rgba(15,118,110,.48); box-shadow:0 16px 34px rgba(20,45,68,.16),0 0 0 3px rgba(15,118,110,.08); transform:translateY(-2px); }
.research-post-thumbnail-button:focus-visible { outline:3px solid rgba(15,118,110,.3); outline-offset:3px; border-color:var(--rp-teal); }
.research-post-thumbnail-button:hover .research-post-thumbnail,.research-post-thumbnail-button:focus-visible .research-post-thumbnail { transform:scale(1.012); }
.research-post-meta { margin:0 0 18px; color:var(--rp-muted); font-size:.9rem; line-height:1.55; }
.research-post-copy { display:grid; gap:12px; color:#30465b; font-size:1rem; line-height:1.7; }
.research-post-copy p { margin:0; }
.research-post-link { display:inline-flex; margin-top:20px; color:var(--rp-teal); font-weight:800; text-decoration:none; }
.research-post-link:hover { text-decoration:underline; }
.research-posts-empty { padding:32px; border:1px dashed var(--rp-line); border-radius:16px; color:var(--rp-muted); text-align:center; }
.research-post-skeleton { height:170px; border-radius:12px; background:linear-gradient(90deg,#f2f4f4 25%,#fafafa 50%,#f2f4f4 75%); background-size:200% 100%; animation:rp-shimmer 1.4s infinite; grid-column:1/-1; }
@keyframes rp-shimmer { to { background-position:-200% 0; } }
.research-posts-disclaimer { padding:58px 0 72px; background:var(--rp-warm); border-top:1px solid var(--rp-line); }
.research-posts-disclaimer p { max-width:780px; color:var(--rp-muted); line-height:1.7; }
.research-posts-disclaimer a { color:var(--rp-teal); font-weight:800; text-decoration:none; }
.research-image-modal { width:min(94vw,1100px); max-height:92vh; padding:0; border:0; border-radius:18px; background:#fff; box-shadow:0 28px 90px rgba(5,20,35,.35); overflow:auto; }
.research-image-modal::backdrop { background:rgba(6,20,31,.78); backdrop-filter:blur(5px); }
.research-image-modal-bar { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px; background:rgba(255,255,255,.95); border-bottom:1px solid var(--rp-line); }
.research-image-modal-bar h2 { margin:0; font-size:1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.research-image-modal-close { flex:0 0 auto; width:40px; height:40px; border:1px solid var(--rp-line); border-radius:50%; background:#fff; color:var(--rp-ink); font-size:1.7rem; line-height:1; cursor:pointer; }
.research-image-modal img { display:block; width:100%; height:auto; background:#f7f4ef; }
@media (max-width:720px) { .research-posts-shell{width:min(calc(100% - 28px),1080px)} .research-posts-main{padding-top:var(--site-topbar-offset,92px)} .research-post-card{grid-template-columns:1fr;gap:20px;padding:22px} .research-post-side{align-items:flex-start} .research-post-date{flex-direction:row;gap:7px;align-items:baseline} .research-posts-heading-row{align-items:start;flex-direction:column;gap:8px} .research-post-thumbnail-button{width:100%;max-width:340px} }