/* ═══════════════════════════════════════════════════════
   ABL COSMOS v7 · PERFORMANCE-FIRST
   
   PERFORMANCE RULES:
   ✅ Cards use transform+opacity ONLY (GPU composited)
   ✅ NO backdrop-filter on cards (kills mobile GPU)
   ✅ NO dynamic filter:blur per-frame
   ✅ ALL DOM writes batched in single RAF
   ✅ Stars: CSS only, no JS animation, reduced count
   ✅ Aurora: CSS only, low opacity, no JS
   ✅ Topbar: ONE backdrop-filter, not per-card
   ✅ will-change:transform on cards
   ✅ contain:layout style on stage
   ✅ pointer-events:none on hidden cards
═══════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:#060609;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
:root{
  --R:#ff3b30;
  --W:rgba(255,255,255,.93);
  --W2:rgba(255,255,255,.55);
  --W3:rgba(255,255,255,.24);
  --GB:rgba(255,255,255,.10);
  --r1:22px;--r2:14px;
}

/* ── SHELL ── */
#app{
  position:relative;width:100%;height:100vh;
  font-family:'Inter',system-ui,sans-serif;
  color:var(--W);overflow:hidden;background:#060609;
  /* Contain layout to prevent reflow bubbling */
  contain:layout style;
}

/* ── STATIC BACKGROUND (no JS, no repaints) ── */
#bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 100% 70% at 15% 35%,rgba(80,0,0,.28) 0%,transparent 50%),
    radial-gradient(ellipse 75% 55% at 85% 60%,rgba(0,15,70,.20) 0%,transparent 50%),
    #060609;
  /* Static — never changes */
}

/* ── GRID (pure CSS, no animation) ── */
#grid{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,59,48,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,59,48,.018) 1px,transparent 1px);
  background-size:80px 80px;
  opacity:.7;
}

/* ── AURORA (CSS-only, LOW cost, single element) ── */
#aurora{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* Single CSS gradient animation — much cheaper than JS orbs */
  background:
    radial-gradient(ellipse 60% 50% at 20% 40%,rgba(80,0,0,.14) 0%,transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 65%,rgba(0,15,60,.12) 0%,transparent 55%);
  animation:auroraDrift 25s ease-in-out infinite alternate;
  will-change:opacity;
}
@keyframes auroraDrift{
  0%  {opacity:.6}
  50% {opacity:1}
  100%{opacity:.7}
}

/* ── STARS (CSS-only, 80 elements max, no JS) ── */
#stars{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
/* Stars generated by JS but animated via CSS only */
.st{
  position:absolute;border-radius:50%;
  animation:stk var(--sd,5s) ease-in-out infinite var(--sdl,0s);
  /* will-change only on a few stars */
}
@keyframes stk{
  0%,100%{opacity:var(--so,.5)}
  50%    {opacity:calc(var(--so,.5)*.1)}
}

/* ── TOPBAR (ONE backdrop-filter, not per-card) ── */
#topbar{
  position:absolute;top:12px;left:12px;right:12px;z-index:600;
  display:flex;align-items:center;gap:7px;
  padding:8px 12px;
  background:rgba(6,6,12,.80);
  border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r1);
  /* Single backdrop-filter in the whole page for topbar */
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 40px rgba(0,0,0,.55);
}

.brand{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.blogo{
  width:32px;height:32px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;
  background:rgba(255,59,48,.20);border:1px solid rgba(255,59,48,.28);
  font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--R);
}
.bname{
  font-size:12px;font-weight:600;letter-spacing:.07em;line-height:1;
  background:linear-gradient(120deg,var(--W) 40%,rgba(255,100,90,.85));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.bsub{font-size:9px;color:var(--W3);font-weight:300;margin-top:2px;}
.sep{width:1px;height:22px;background:var(--GB);flex-shrink:0;}

/* Search */
#sw{position:relative;flex:1;display:flex;align-items:center;min-width:0;}
.sico{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--W3);font-size:14px;pointer-events:none;
}
#si{
  width:100%;height:34px;border-radius:var(--r2);
  border:1px solid transparent;background:rgba(255,255,255,.07);
  padding:0 36px 0 34px;color:var(--W);
  font-family:'Inter',sans-serif;font-size:12px;
  outline:none;transition:border-color .18s,background .18s;
}
#si::placeholder{color:var(--W3);}
#si:focus{border-color:rgba(255,59,48,.35);background:rgba(255,255,255,.09);}
#sc{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;border:0;
  background:rgba(255,255,255,.12);color:var(--W3);font-size:10px;
  cursor:pointer;display:none;align-items:center;justify-content:center;
}
#sc.v{display:flex;}

/* Tabs */
#tabs{display:flex;gap:3px;flex-shrink:0;}
.tab{
  height:30px;padding:0 11px;border-radius:var(--r2);border:0;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;letter-spacing:.03em;
  cursor:pointer;color:var(--W2);background:transparent;
  transition:background .15s,color .15s;
}
.tab:hover{background:rgba(255,255,255,.08);color:var(--W);}
.tab.on{background:rgba(255,255,255,.11);color:var(--W);}
.tab.on.abl{background:rgba(255,59,48,.20);color:#ff8a82;}

/* Nav */
#nav{display:flex;gap:3px;flex-shrink:0;}
.nb{
  height:30px;padding:0 9px;border-radius:var(--r2);border:0;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:500;
  cursor:pointer;color:var(--W2);background:transparent;
  transition:background .15s,color .15s;
  display:flex;align-items:center;gap:4px;white-space:nowrap;
}
.nb:hover{background:rgba(255,255,255,.08);color:var(--W);}
.nb.on{color:var(--R);}

/* ── HUD ── */
#hud{
  position:absolute;left:16px;top:76px;z-index:500;
  display:flex;gap:6px;flex-wrap:wrap;pointer-events:none;
}
.chip{
  display:flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:100px;
  font-size:10px;font-weight:500;letter-spacing:.03em;
  /* NO backdrop-filter here — use opaque bg instead */
  background:rgba(6,6,12,.85);
  border:1px solid rgba(255,255,255,.09);
}
.chip.m{background:rgba(30,4,2,.90);border-color:rgba(255,59,48,.22);color:#ff8e86;}
.chip.s{color:var(--W2);}
.hdot{
  width:5px;height:5px;border-radius:50%;
  background:var(--R);box-shadow:0 0 4px var(--R);
  animation:hdp 2.5s ease-in-out infinite;flex-shrink:0;
}
@keyframes hdp{0%,100%{opacity:1}50%{opacity:.25}}
.spin{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.12);border-top-color:var(--W);
  animation:spn .6s linear infinite;
}
@keyframes spn{to{transform:rotate(360deg)}}

/* ── STAGE (the 2D projection canvas) ── */
#stage{
  position:absolute;inset:0;z-index:10;
  cursor:grab;outline:none;
  /* Critical: contain prevents layout recalc from spreading */
  contain:layout style size;
  overflow:hidden;
}
#stage:active{cursor:grabbing;}

/* Focal rings — pure CSS, cheap */
#focal{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;z-index:11;
  width:160px;height:160px;
}
.fr{
  position:absolute;top:50%;left:50%;
  border-radius:50%;border:1px solid rgba(255,59,48,.10);
  transform:translate(-50%,-50%);
  animation:forb var(--fs,18s) linear infinite var(--fd,normal);
  will-change:transform;
}
.fr:nth-child(1){width:40px;height:40px;border-color:rgba(255,59,48,.18);--fs:8s;}
.fr:nth-child(2){width:85px;height:85px;--fs:15s;--fd:reverse;}
.fr:nth-child(3){width:148px;height:148px;--fs:24s;}
.fc{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%;
  background:rgba(255,255,255,.45);
  box-shadow:0 0 12px rgba(255,59,48,.30);
}
@keyframes forb{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ══════════════════════════════════════════════════════
   CARDS — PERFORMANCE CRITICAL SECTION
   
   Key decisions:
   - NO backdrop-filter (costs 2-5ms per card on mobile)
   - NO box-shadow with large blur (expensive)
   - NO filter:blur dynamic per-frame
   - USE will-change:transform (creates compositor layer)
   - USE transform+opacity ONLY for position updates
   - Solid semi-transparent background instead of glass
   - Simple box-shadow (1 layer, small blur)
══════════════════════════════════════════════════════ */
.card{
  position:absolute;
  left:0;top:0;
  border-radius:var(--r1);
  overflow:hidden;
  cursor:pointer;
  color:var(--W);
  user-select:none;-webkit-user-select:none;
  /* GPU layer — transform+opacity only, composited */
  will-change:transform,opacity;
  /* Solid bg: much cheaper than backdrop-filter */
  background:rgba(18,18,26,.92);
  border:1px solid rgba(255,255,255,.11);
  /* Single shadow, small spread */
  box-shadow:0 12px 32px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08);
  /* Entry animation — one-shot, then done */
  animation:cIn .45s cubic-bezier(.34,1.36,.64,1) both;
  animation-delay:var(--cd,0s);
  transition:border-color .2s,box-shadow .2s;
}
@keyframes cIn{
  from{opacity:0;transform:var(--bt) scale(.2);}
  to  {opacity:1;}
}
.card:hover{
  border-color:rgba(255,255,255,.22);
  box-shadow:0 20px 48px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14);
}
/* Top shimmer line — cheap pseudo element */
.card::after{
  content:'';position:absolute;top:0;left:15%;right:15%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  pointer-events:none;
}

/* ── SECTION CARD (narrow — less pixels to composite) ── */
.cs{width:228px;}
.cs-accent{
  position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:50%;
  /* Cheaper than backdrop glow: use box-shadow instead of filter:blur */
  opacity:.5;
  background:radial-gradient(circle,var(--ac,#ff3b30),transparent 70%);
  pointer-events:none;
  animation:acglow 3.5s ease-in-out infinite;
}
@keyframes acglow{0%,100%{opacity:.4}50%{opacity:.75}}
.cs-body{padding:18px 17px 0;}
.cs-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:8.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,100,90,.85);margin-bottom:10px;
}
.cs-tag::before{
  content:'';width:3px;height:3px;border-radius:50%;
  background:var(--R);flex-shrink:0;
}
.cs-title{
  font-family:'Playfair Display',serif;
  font-size:24px;line-height:1.06;font-weight:700;font-style:italic;
  margin:0 0 8px;
}
.cs-desc{font-size:11px;line-height:1.54;color:var(--W2);font-weight:300;margin:0;}
.cs-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 17px 14px;margin-top:12px;
  border-top:1px solid rgba(255,255,255,.07);
}
.cs-cnt{font-size:9px;color:var(--W3);font-weight:500;}
.cs-ent{font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,100,90,.85);}
.cs-ent::after{content:' →';}

/* ── POST CARD ── */
.cp{width:252px;}
.cpthumb{
  position:relative;height:140px;overflow:hidden;
  /* Static gradient — no computation */
  background:var(--cg,#0c0c18);
}
.cpthumb img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  /* NO transition here — saves composite layer */
  display:block;
}
.cpno{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:48px;font-style:italic;
  font-weight:700;color:rgba(255,255,255,.06);
}
/* Overlay gradient: CSS gradient, cheap */
.cpov{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,transparent 20%,rgba(14,14,22,.80) 100%);
  pointer-events:none;
}
.cpcat{
  position:absolute;top:9px;left:9px;
  padding:2px 8px;border-radius:100px;
  background:rgba(6,6,14,.85);border:1px solid rgba(255,255,255,.12);
  font-size:7.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--W2);
}
.cpweb{
  position:absolute;top:9px;right:9px;
  padding:2px 8px;border-radius:100px;
  background:rgba(0,100,170,.25);border:1px solid rgba(0,180,255,.22);
  font-size:7.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(100,210,255,.90);
}
.cp-body{padding:12px 14px 14px;}
.cp-body h3{
  font-family:'Playfair Display',serif;font-size:15px;line-height:1.26;
  font-weight:700;margin:0 0 5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cp-body p{
  font-size:10.5px;line-height:1.55;color:var(--W2);font-weight:300;margin:0 0 10px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cp-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:9px;border-top:1px solid rgba(255,255,255,.07);
}
.cp-dom{font-size:8.5px;color:var(--W3);letter-spacing:.03em;}
.cp-open{font-size:8.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,100,90,.85);}
.cp-open::after{content:' ↗';}
.card.cw .cp-open{color:rgba(100,200,255,.85);}

/* ── ZOOM BAR ── */
#zbar{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  z-index:200;display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
}
.zlbl{font-size:8px;font-weight:500;letter-spacing:.10em;text-transform:uppercase;color:var(--W3);}
.ztrack{width:3px;height:72px;border-radius:3px;background:rgba(255,255,255,.08);position:relative;}
.zt{
  position:absolute;left:-3.5px;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,.80);
  /* will-change for smooth update */
  will-change:top;
  top:50%;
}

/* ══════════════════════════════════════════════════════
   COSMOS VIEWER — article opens IN the cosmos
   Uses CSS transform scale, not fixed overlay
══════════════════════════════════════════════════════ */

/* Dim + cards fade — done by adding .viewing class to stage */
#stage.viewing{cursor:default;}
#stage.viewing .card:not(.sel){
  /* Only opacity + transform — GPU composited, no reflow */
  opacity:0!important;
  pointer-events:none;
}
#stage.viewing #vdim{opacity:1;}
#stage.viewing #vglow{opacity:1;}

/* Dim overlay */
#vdim{
  position:absolute;inset:0;z-index:50;
  background:rgba(0,0,0,.58);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  will-change:opacity;
}
/* Center glow */
#vglow{
  position:absolute;z-index:51;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:60vw;height:60vh;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,59,48,.07) 0%,transparent 70%);
  pointer-events:none;opacity:0;
  transition:opacity .4s ease;
  will-change:opacity;
}

/* Viewer itself */
#viewer{
  position:absolute;z-index:800;
  top:50%;left:50%;
  /* Start: invisible, tiny */
  transform:translate(-50%,-50%) scale(.05);
  opacity:0;pointer-events:none;
  /* Size */
  width:min(860px,88vw);
  max-height:min(540px,80vh);
  display:flex;
  border-radius:var(--r1);overflow:hidden;
  /* Solid dark glass — NO backdrop-filter */
  background:rgba(12,12,20,.96);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.80),inset 0 1px 0 rgba(255,255,255,.10);
  /* GPU accelerated transition */
  transition:transform .44s cubic-bezier(.34,1.36,.64,1),opacity .28s ease;
  will-change:transform,opacity;
}
#viewer.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;pointer-events:all;
}
#viewer.cls{
  transform:translate(-50%,-50%) scale(.05);
  opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.34,.2,.64,1),opacity .2s ease;
}

/* Image side */
#viv{width:40%;flex-shrink:0;position:relative;overflow:hidden;background:#090912;}
#vimg{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .35s;}
#vnoimg{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Playfair Display',serif;font-size:80px;font-style:italic;font-weight:700;
  color:rgba(255,255,255,.05);
}
#vivg{
  position:absolute;inset:0;
  background:linear-gradient(to right,transparent 55%,rgba(12,12,20,.75)100%);
  pointer-events:none;
}
.vcat{
  position:absolute;top:14px;left:14px;padding:3px 10px;border-radius:100px;
  background:rgba(5,5,14,.88);border:1px solid rgba(255,255,255,.12);
  font-size:7.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--W2);
}
.vweb{
  position:absolute;top:14px;right:14px;padding:3px 10px;border-radius:100px;
  background:rgba(0,100,160,.22);border:1px solid rgba(0,180,255,.20);
  font-size:7.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(100,210,255,.90);
}

/* Info side */
#vinfo{
  flex:1;display:flex;flex-direction:column;padding:26px 24px 22px;
  overflow-y:auto;min-height:0;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.07) transparent;
}
#vinfo::-webkit-scrollbar{width:3px;}
#vinfo::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:2px;}
.vtag{
  font-size:8.5px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(255,100,90,.85);margin-bottom:11px;
  display:flex;align-items:center;gap:5px;
}
.vtag::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--R);flex-shrink:0;}
#vtitle{
  font-family:'Playfair Display',serif;
  font-size:clamp(16px,2.4vw,24px);line-height:1.22;font-weight:700;
  margin:0 0 12px;color:var(--W);
}
#vexc{font-size:12px;line-height:1.70;color:var(--W2);font-weight:300;margin:0 0 18px;flex:1;}
.vmeta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.vmc{
  display:flex;align-items:center;gap:3px;padding:3px 9px;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
  font-size:9px;font-weight:500;color:var(--W2);
}
.vbtns{display:flex;gap:7px;flex-wrap:wrap;}
.vbtn{
  display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 16px;
  border-radius:var(--r2);border:0;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform .12s,opacity .15s;
}
.vbtn:hover{transform:translateY(-1px);opacity:.9;}
.vbtn-p{background:var(--R);color:#fff;}
.vbtn-g{background:rgba(255,255,255,.09);color:var(--W);border:1px solid rgba(255,255,255,.11);}
#vcls{
  position:absolute;top:11px;right:11px;z-index:10;
  width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.13);
  background:rgba(10,10,18,.90);color:var(--W2);font-size:15px;
  cursor:pointer;display:grid;place-items:center;
  transition:background .15s,color .15s;
}
#vcls:hover{background:rgba(255,59,48,.28);color:#fff;}

/* ── INSTRUCTIONS ── */
#inst{
  position:absolute;bottom:16px;left:50%;transform:translateX(-50%);
  z-index:300;pointer-events:none;
  display:flex;gap:12px;align-items:center;
  padding:6px 16px;border-radius:100px;
  background:rgba(6,6,12,.75);border:1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}
.ib{display:flex;align-items:center;gap:4px;font-size:9.5px;color:var(--W3);}
.ik{
  padding:1px 5px;border-radius:4px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);
  font-size:8px;font-weight:600;color:var(--W2);font-family:monospace;
}
.isep{width:1px;height:11px;background:rgba(255,255,255,.10);}

/* Empty state */
.empty{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;
}
.empty h3{
  font-family:'Playfair Display',serif;font-size:32px;font-style:italic;
  color:rgba(255,255,255,.07);margin-bottom:8px;
}
.empty p{font-size:11px;color:var(--W3);font-weight:300;}

/* ══ RESPONSIVE ══ */
@media(max-width:800px){
  #topbar{flex-wrap:wrap;top:8px;left:8px;right:8px;gap:5px;}
  #tabs,#nav{order:3;}
  #hud{top:138px;left:12px;}
  .cs{width:195px;}.cs-title{font-size:20px;}
  .cp{width:218px;}.cpthumb{height:120px;}
  #viewer{flex-direction:column;max-height:82vh;}
  #viv{width:100%;height:155px;flex-shrink:0;}
  #vivg{background:linear-gradient(to bottom,transparent 35%,rgba(12,12,20,.80)100%);}
  #inst{display:none;}
}
@media(max-width:500px){
  .bsub{display:none;}
  .cs{width:175px;}.cs-title{font-size:18px;}
  .cp{width:200px;}.cpthumb{height:110px;}.cp-body h3{font-size:14px;}
  #viewer{width:96vw;}
  #vinfo{padding:16px 16px 14px;}
}
/* TV / large screen */
@media(min-width:1800px){
  .cs{width:280px;}.cs-title{font-size:30px;}
  .cp{width:300px;}.cpthumb{height:168px;}.cp-body h3{font-size:18px;}
}