:root{
  --rl-gap: 22px;
  --rl-bg: #fff;
  --rl-fg: #000;
  --rl-muted:#333;
  --rl-border:#000;
  --cut: 14px;
}
body{color:var(--rl-fg)}

/* ========== BASE CARD ========== */
.ang-card{
  position:relative;
  background:var(--rl-bg);
  border:1px solid var(--rl-border);
  padding:18px;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.ang-hover{transition:transform .18s ease}
.ang-hover:hover{transform:translateY(-3px)}

.chip, .ang-btn{
  display:inline-block;
  border:1px solid var(--rl-border);
  background:var(--rl-bg);
  color:var(--rl-fg);
  text-decoration:none;
  padding:7px 12px;
  line-height:1;
  font-weight:700;
  user-select:none;
  clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.chip:hover, .ang-btn:hover{background:var(--rl-fg);color:var(--rl-bg)}

.rl-grid{display:grid;gap:var(--rl-gap)}

.rl-thumb{
  aspect-ratio:16/9;
  display:block;
  position:relative;
  background:#f3f3f3;
  border-bottom:1px solid var(--rl-border);
  overflow:hidden;
}
.rl-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.rla-card .rl-body{padding:14px 14px 16px}
.rla-card .rl-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.rla-card .rl-title-sm{font-weight:800;margin:0 0 6px}
.rla-card .rl-title-sm a{color:inherit;text-decoration:none}
.rla-card .rl-title-sm a:hover{text-decoration:underline}
.rla-card .rl-excerpt{color:var(--rl-muted);font-size:14px;line-height:1.55;margin:0 0 10px}
.rla-card .rl-more{margin-top:auto;padding:0 14px 14px}

/* ========== VARIANTS ========== */
.rla--header,
.rla--textbox{
  border:1px solid var(--rl-border);
  background:var(--rl-bg);
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.rla--header { padding:20px; }
.rla--textbox { padding:18px; }

/* Body containers */
.rla--header .rl-body,
.rla--textbox .rl-body {
  display:flex;
  flex-direction:column;
  gap:6px;
  width:100%;
}

/* Alignment (wrapper + internal row) */
.rla--header.rla-align-left   { text-align:left   !important; }
.rla--header.rla-align-center { text-align:center !important; }
.rla--header.rla-align-right  { text-align:right  !important; }

.rla--textbox.rla-align-left   { text-align:left; }
.rla--textbox.rla-align-center { text-align:center; }
.rla--textbox.rla-align-right  { text-align:right; }

.rla--header .rl-row{
  display:flex; align-items:center; gap:10px; width:100%;
}
.rla--header.rla-align-left  .rl-row { justify-content:flex-start  !important; }
.rla--header.rla-align-center .rl-row { justify-content:center      !important; }
.rla--header.rla-align-right .rl-row { justify-content:flex-end     !important; }

/* Icon + subtitle */
.rla-icon { width:22px; height:22px; display:inline-block; transform:translateY(1px); }
.rla-sub  { color:var(--rl-muted); font-size:14px; line-height:1.4; }

/* Filled (dark) variant */
.rla-fill-solid { background:#000; color:#fff; }
.rla-fill-solid .chip,
.rla-fill-solid .ang-btn { border-color:#fff; color:#fff; background:transparent; }
.rla-fill-solid .ang-btn:hover { background:#fff; color:#000; }

/* ========== HEADING SIZES (strong specificity) ========== */
header.ang-card.rla--header h1.rl-title-sm{ font-size:28px !important; line-height:1.25; margin:0; font-weight:800; letter-spacing:.5px; }
header.ang-card.rla--header h2.rl-title-sm{ font-size:24px !important; line-height:1.25; margin:0; font-weight:800; letter-spacing:.5px; }
header.ang-card.rla--header h3.rl-title-sm{ font-size:21px !important; line-height:1.25; margin:0; font-weight:800; letter-spacing:.5px; }
header.ang-card.rla--header h4.rl-title-sm{ font-size:18px !important; line-height:1.25; margin:0; font-weight:800; letter-spacing:.5px; }
header.ang-card.rla--header h5.rl-title-sm{ font-size:16px !important; line-height:1.25; margin:0; font-weight:800; letter-spacing:.5px; }
header.ang-card.rla--header h6.rl-title-sm{ font-size:15px !important; line-height:1.25; margin:0; font-weight:800; letter-spacing:.5px; }

/* Decorative lines (only on centered header) */
.rla--header.rla-align-center .rl-title-sm {
  display:inline-flex; align-items:center; gap:12px;
}
.rla--header.rla-align-center .rl-title-sm::before,
.rla--header.rla-align-center .rl-title-sm::after {
  content:""; display:block; height:0; border-top:1px solid var(--rl-border);
  inline-size: clamp(24px, 10vw, 140px);
}

/* Textbox heading */
.rla--textbox .rl-title-sm { font-size:18px; margin:0 0 4px; }