@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Sinhala:wdth,wght@62.5..100,100..900&display=swap');

.section-wrap { padding-top: 2rem; padding-bottom: 2rem; }

    .brand-top { font-family: 'Merriweather', Georgia, serif; font-weight: 700; font-size: 2.75rem; letter-spacing: -0.5px; color:#000000 }
	  .brand-top-sub { font-family: 'Merriweather', Georgia, serif; font-weight: 700; font-size: 2rem; color: #000000 }

    /* Top tag chips */
    .chip-row { margin: .5rem 0 .5rem ; }
    .chip { display: inline-block; background: var(--tag-bg); color: var(--tag-text); border-radius: 999px; padding: .4rem .85rem; font-size: .85rem; font-weight: 600; margin-right: .5rem; margin-bottom: .5rem }

    /* Feature card */
    .lead-card { border: 0; }
    .lead-image { width: 100%; /*height: 420px;*/ object-fit: cover; border-radius: .25rem; }
    @media (max-width: 991.98px) { .lead-image{ height: auto; } }
    @media (max-width: 575.98px) { .lead-image{ height: auto; } }

    .lead-meta { color: var(--muted); font-size: .875rem; }

    .lead-headline { font-weight: 800; font-size: 2.15rem; line-height: 1.2; margin-top: 1rem; margin-bottom: .25rem; }
    .lead-subhed { font-size: 1.25rem; color: #222; }

    .byline { color: var(--muted); font-size: .85rem; }

    .explain-text { color: #3b3b3b; font-size: 1rem; margin-top: 10px;  font-family: "Noto Serif Sinhala", serif;}

    /* Small story cards */
    .mini-card { border: 0; border-bottom: 1px solid var(--divider); padding-bottom: 0.4rem;}
    .mini-image { width: 100%; /*height: 180px;*/ object-fit: cover; border-radius: .25rem; }
    .mini-kicker { color: #6b7280; font-size: .85rem; font-weight: 600; text-transform: none; margin-bottom: .25rem; margin-top: .25rem;}
    .mini-title { font-weight: 500; font-size: 1.05rem; line-height: 1.35; margin-top: 0px; font-family: "Noto Serif Sinhala", serif;}
    .mini-time { color: var(--muted); font-size: .85rem; }

    /* Ad block */
    .promo-rail { background: #fff; align-items: center; margin-bottom: 30px}
    .promo-rail span { font-size: 3.25rem; letter-spacing: 1px; }

    /* Footer spacing under right rail */
    .right-col { display: flex; flex-direction: column; gap: 1.25rem; }

    /* Links */
    a.headline-link, a.mini-link { color: inherit; text-decoration: none;   font-family: "Noto Serif Sinhala", serif; font-weight: 500; color: #111111}
    a.headline-link:hover, a.mini-link:hover { text-decoration: underline; }
		  
		  
		  
	.wrap{
    max-width: 440px;         /* matches the screenshot’s feel */
    margin: 0px auto;
    padding: 0 18px;
  }

  .story{
    display:grid;
    grid-template-columns: 1fr 120px;
    gap: 22px;
    align-items:start;
    padding: 22px 0;
    border-bottom: 1px solid var(--rule);
  }

  .story:last-child{ border-bottom: 0; }

  .kicker{
    font-size:12px;
    letter-spacing: 2.2px;
    font-weight:700;
    color:#8b8b8b;
    margin:0 0 8px;
  }

  .title{
    font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size:24px;
    font-weight:700;
    line-height:1.18;
    margin:0 0 12px;
  }
  .title em{ font-style: italic; }

  .byline{
    font-size:12px;
    letter-spacing: 2.3px;
    font-weight:700;
    color:#222;
    margin:0;
  }

  .media{
    width:120px; height:160px;
    border-radius: 2px;
    object-fit: cover;
    display:block;
  }

  /* Filmstrip thumbnail (for VOGUE WORLD card) */
  .filmstrip{
    position:relative;
    background:#000;
    color:#fff;
    width:120px; height:120px;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; text-align:center;
    border-radius:2px;
  }
  .filmstrip small{ font-weight:700; letter-spacing:.5px; opacity:.9; }
  .filmstrip::before,
  .filmstrip::after{
    content:"";
    position:absolute; top:10px; bottom:10px; width:10px;
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0 10px,
        white 10px 14px,
        transparent 14px 24px
      );
  }
  .filmstrip::before{ left:-10px; }
  .filmstrip::after{ right:-10px; }

  /* Links (optional) */
  a{ color:inherit; text-decoration:none; }
  a:hover .title{ text-decoration:underline; }

  /* Responsive tweak */
  @media (max-width:420px){
    .story{ grid-template-columns: 1fr 100px; gap:16px; }
    .media, .filmstrip{ width:100px; height:100px; }
    .title{ font-size:22px; }
  }