/* Homepage Specific Styles */

/* Layout & Spacing */
.negative-margin-top-60 {
    margin-top: -60px;
}

.w-85px {
    width: 85px;
}

.w-120px {
    width: 120px;
}

.mt-n80px {
    margin-top: -80px;
}

.z-10 {
    z-index: 10;
}

.mt-n3 {
    margin-top: -1rem;
}

.ws-gradient-overlay {
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));
}

/* Web Stories & Shorts */
.web-story-item {
    scroll-snap-align: start;
    width: 45%;
}

@media (min-width: 768px) {
    .web-story-item {
        width: 23%; /* Tablet/Desktop: 4 items visible with gap */
    }
}

.web-story-item:hover img {
    transform: scale(1.05);
}

.ratio-9x16 {
    --bs-aspect-ratio: 177.77%;
}

.bg-gradient-to-t-black {
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.letter-spacing-1 {
    letter-spacing: 1px;
}

.font-serif {
    font-family: "Noto Sans Devanagari", sans-serif;
}

/* Phone Mockup */
/* Reduce gap above bottom bar and indicator */
 
 
/* Shorts App Header inside phone */
.shorts-brand-badge {
    background: linear-gradient(180deg, #ffffff 0%, #ffffffcc 100%);
    border: 1px solid #eee;
    padding: 6px 18px !important; /* Extra space left-right */
    gap: 8px; /* Space between brand and tail */
    line-height: 1;
}
.shorts-brand-icon {
    height: 16px;
    width: auto;
    object-fit: contain;
}
@media (max-width: 991.98px) {
    .shorts-brand-badge { padding: 5px 14px !important; gap: 6px; }
    .shorts-brand-icon { height: 14px; }
}

.series-strip {
    background: linear-gradient(90deg, #f5f5f5 0%, #ffffff 55%, #f5f5f5 100%);
    border-radius: 8px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* Override: Adjust utility height for homepage layout */
.h-100 {
    height: 100% !important;
}

/* Font Sizes */
.fs-12px { font-size: 12px; }
.fs-13px { font-size: 13px; }
.fs-15px { font-size: 15px; }
.fs-05rem { font-size: 0.5rem; }
.fs-065rem {
    font-size: 0.65rem !important;
}

.fs-075rem {
    font-size: 0.75rem !important;
}
.fs-085rem { font-size: 0.85rem; }

/* Line Heights */

/* Live Updates Timeline */
.live-updates-ml { margin-left: 5px; }
.live-updates-border {
    border-color: #d1d1d1 !important;
    left: 4px;
}
.live-update-dot {
    width: 10px;
    height: 10px;
    left: 4px;
    margin-top: 8px;
    border-color: #f58e08 !important;
}

/* Sizing */
.w-10px { width: 10px; }
.h-10px { height: 10px; }
.w-40px { width: 40px; }
.h-40px { height: 40px; }
.w-50px { width: 50px !important; }
.h-50px { height: 50px !important; }
.w-60px { width: 60px; }
.h-60px { height: 60px; }
.w-85px { width: 85px; }
.w-140px { width: 140px; }
.h-200px { height: 200px; }
.max-w-50px { max-width: 50px; }
.max-h-50px { max-height: 50px; }

/* Misc Utilities */

.bg-gradient-dark-bottom {
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
}

.text-shadow {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.white-space-nowrap { white-space: nowrap; }

.ratio-1x1 {
    aspect-ratio: 1/1;
    object-fit: cover;
}

.ratio-16x9 {
    aspect-ratio: 16/9;
    object-fit: cover;
}

.object-fit-cover {
    object-fit: cover;
}

.object-fit-cover-center {
    object-fit: cover;
    object-position: center center;
}

/* Feature Helpers */
.min-h-150px { min-height: 150px; }
.min-h-200px { min-height: 200px; }
.min-h-300px { min-height: 300px; }
.top-20px { top: 20px; }
.z-0 { z-index: 0; }
.z-1 { z-index: 1; }
.w-32px { width: 32px; }
.h-32px { height: 32px; }

/* Effects */
.bg-gradient-dark-transparent {
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
}
.backdrop-blur {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.opacity-75 { opacity: 0.75; }
.hover-opacity:hover { opacity: 0.8; transition: opacity 0.2s; }
/* Typography */
:root {
    --font-serif-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Layout Helpers */
.negative-margin-top-60 { margin-top: -60px; }
.mt-n80px { margin-top: -80px; }
.mt-n3 { margin-top: -1rem !important; }
.z-10 { z-index: 10; }
.border-dotted-black { border-bottom: 1px dotted #000; }
.live-updates-ml { margin-left: 0.5rem; }
.live-updates-border { border-left: 2px solid #dee2e6; }
.live-update-dot { width: 10px; height: 10px; }
.white-space-nowrap { white-space: nowrap; }

.hover-shadow:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    transform: translateY(-2px);
}

/* Phase 3 newsroom homepage */
:root {
    --nr-ink: #111317;
    --nr-muted: #5f6670;
    --nr-rule: #d9dde3;
    --nr-soft: #f6f4ef;
    --nr-paper: #ffffff;
    --nr-accent: #b20d18;
    --nr-accent-dark: #7f0710;
    --nr-blue: #173f77;
    --nr-gutter: clamp(16px, 2vw, 28px);
    --nr-serif: Georgia, "Times New Roman", "Noto Serif Devanagari", serif;
    --nr-sans: var(--ntcms-home-stable-sans, "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif);
}

.nr-homepage {
    background: var(--nr-paper);
    color: var(--nr-ink);
    font-family: var(--nr-sans);
}

.nr-shell {
    width: min(100% - 32px, 1220px);
    margin-inline: auto;
}

.nr-breaking {
    font-family: var(--ntcms-home-stable-sans, "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif);
    border-block: 1px solid var(--nr-rule);
    background: #fff;
    box-shadow: inset 0 -1px 0 rgba(17, 19, 23, 0.04);
    contain: layout paint;
}

.nr-breaking__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 62px;
    block-size: 62px;
    padding-block: 10px;
    overflow: hidden;
}

.nr-breaking__label,
.nr-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 12px;
    background: var(--nr-accent);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.nr-breaking__items {
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.nr-breaking__items a {
    position: relative;
    color: var(--nr-ink);
    text-decoration: none;
    white-space: nowrap;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    padding-right: 20px;
    margin-right: 20px;
}

.nr-breaking__items a:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--nr-accent);
    transform: translateY(-50%);
}

.nr-breaking__items a:hover,
.nr-card__title a:hover,
.nr-latest a:hover,
.nr-opinion a:hover,
.nr-topic:hover strong {
    color: var(--nr-accent);
}

/* Lead card now renders as a white editorial shell, so hover should stay
   newsroom-clean and readable instead of inheriting the older red promo
   treatment. */
.nr-card--lead .nr-card__title a:hover,
.nr-card--lead .nr-card__body a:hover {
    color: var(--nr-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nr-hero {
    font-family: var(--ntcms-home-stable-sans, "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif);
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(260px, 0.68fr) minmax(280px, 0.62fr);
    gap: clamp(22px, 2.2vw, 34px);
    align-items: start;
    padding-block: 28px 30px;
}

.nr-hero__lead,
.nr-hero__secondary,
.nr-latest {
    min-width: 0;
}

.nr-hero__secondary {
    display: grid;
    gap: 14px;
    align-content: start;
}

.nr-card {
    min-width: 0;
}

.nr-card__media {
    display: block;
    overflow: hidden;
    background: #eceff3;
    color: transparent;
}

.nr-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nr-card--lead .nr-card__media {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    background: linear-gradient(180deg, #f6f8fb 0%, #eceff4 100%);
}

.nr-card--lead {
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.nr-card--lead .nr-card__body {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, #ffffff 100%);
    color: var(--nr-ink);
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    padding: clamp(18px, 2vw, 28px) clamp(20px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
    min-height: clamp(220px, 22vw, 280px);
}

.nr-card--lead .nr-meta,
.nr-card--lead .nr-card__deck {
    color: #5f6878;
}

.nr-card--lead .nr-meta__section {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding-inline: 12px;
    border-radius: 0;
    background: #f6f6f7;
    color: #1a1f2a;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
}

.nr-card--lead .nr-meta > :not(:first-child) {
    position: relative;
    padding-left: 14px;
    margin-left: 2px;
}

.nr-card--lead .nr-meta > :not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 1px;
    height: 1.1em;
    background: rgba(95, 104, 120, 0.34);
    transform: translateY(-50%);
}

.nr-card.nr-card--secondary {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nr-rule);
}

.nr-card--secondary .nr-card__media {
    aspect-ratio: 4 / 3;
}

.nr-second-lead {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--nr-rule);
}

.nr-card.nr-card--lead-secondary {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.nr-card--lead-secondary .nr-card__media {
    aspect-ratio: 4 / 3;
}

.nr-card--lead-secondary .nr-card__title {
    font-size: clamp(1.02rem, 1.28vw, 1.28rem);
    line-height: 1.18;
}

.nr-card--pick .nr-card__media,
.nr-card--section-lead .nr-card__media,
.nr-card--media .nr-card__media {
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
}

.nr-card--utility,
.nr-card--list {
    padding-block: 12px;
    border-top: 1px solid var(--nr-rule);
}

.nr-card__title {
    margin: 0;
    font-family: var(--nr-sans);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

.nr-card__title a,
.nr-latest a,
.nr-opinion a,
.nr-topic {
    color: inherit;
    text-decoration: none;
}

.nr-card--lead .nr-card__title {
    font-family: var(--ntcms-home-stable-sans, "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif);
    font-size: clamp(1.28rem, 1.48vw, 1.74rem);
    font-weight: 700;
    line-height: 1.18;
    min-block-size: calc(3 * 1.18em);
    color: #111827;
    letter-spacing: -0.02em;
    text-wrap: pretty;
}

.nr-card--secondary .nr-card__title {
    font-size: clamp(0.96rem, 1.08vw, 1.1rem);
    line-height: 1.18;
}

.nr-card--pick .nr-card__title,
.nr-card--section-lead .nr-card__title,
.nr-card--media .nr-card__title {
    font-size: clamp(1.05rem, 1.28vw, 1.25rem);
    line-height: 1.2;
}

.nr-card--pick .nr-card__title {
    font-size: clamp(1.05rem, 1.22vw, 1.22rem);
    line-height: 1.18;
    font-weight: 800;
}

.nr-card--list .nr-card__title,
.nr-card--utility .nr-card__title {
    font-size: 0.96rem;
    line-height: 1.2;
}

.nr-card__deck {
    margin: 10px 0 0;
    color: var(--nr-muted);
    font-size: clamp(0.98rem, 1.25vw, 1.1rem);
    line-height: 1.55;
}

.nr-card--lead .nr-card__deck {
    margin-top: 12px;
    font-size: clamp(0.84rem, 0.8vw, 0.94rem);
    line-height: 1.56;
    color: #6b7280;
    min-block-size: calc(3 * 1.56em);
    max-width: 62ch;
    text-wrap: pretty;
}

.nr-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: var(--nr-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}

.nr-card--lead .nr-meta {
    gap: 10px;
    margin-bottom: 14px;
    min-block-size: 30px;
    font-size: 0.92rem;
    line-height: 1.3;
}

.nr-meta__section {
    color: var(--nr-accent);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nr-meta__byline {
    min-width: 0;
    color: var(--nr-muted);
    font-weight: 700;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.nr-card--lead .nr-meta__byline,
.nr-card--lead .nr-meta time {
    color: #6b7280;
    font-weight: 600;
    font-size: 0.9rem;
}

.nr-badge {
    min-height: 18px;
    padding-inline: 6px;
    background: var(--nr-blue);
    font-size: 0.64rem;
}

.nr-latest {
    padding-left: 0;
}

.nr-live-updates {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--nr-rule);
}

.nr-live-updates__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: var(--nr-accent);
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nr-live-updates__heading span {
    width: 10px;
    height: 10px;
    border: 2px solid var(--nr-accent);
    border-radius: 999px;
}

.nr-live-updates ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nr-live-updates li {
    display: grid;
    grid-template-columns: 76px minmax(0,1fr);
    gap: 8px;
    font-size: .9rem;
    line-height: 1.35;
}

.nr-live-updates time {
    color: var(--nr-muted);
    font-size: .78rem;
}

.nr-live-updates a {
    color: inherit;
    text-decoration: none;
}

.nr-block-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--nr-ink);
}

.nr-block-head h2 {
    margin: 0;
    font-family: var(--nr-serif);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 900;
}

.nr-block-head span {
    margin-bottom: 5px;
    color: var(--nr-muted);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nr-block-head--compact {
    margin-bottom: 8px;
}

.nr-latest__list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nr-latest__list li {
    position: relative;
    padding: 11px 0 11px 14px;
    border-bottom: 1px solid var(--nr-rule);
}

.nr-latest__list li:first-child {
    padding-top: 0;
}

.nr-latest__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 17px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--nr-accent);
    border-radius: 999px;
}

.nr-latest__list li:first-child::before {
    top: 6px;
}

.nr-latest__list a {
    display: block;
    font-family: var(--nr-sans);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
}

.nr-band,
.nr-media-band,
.nr-utility-band,
.nr-topics {
    padding-block: 30px;
}

/* Keep below-the-fold newsroom modules out of the initial render tree.
   Hero + breaking stay eagerly rendered; secondary sections get a stable
   intrinsic placeholder so mobile paint improves without CLS spikes. */
.nr-band,
.nr-media-band,
.nr-utility-band,
.nr-topics,
.nr-format-grid,
.nr-photo-gallery,
.nr-video-gallery,
.nr-zodiac-grid,
.nr-portrait-strip,
.nr-section-grid,
.nr-section-pair,
.nr-analysis-grid {
    content-visibility: auto;
    contain-intrinsic-size: 720px auto;
}

.nr-picks {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.nr-section-grid,
.nr-section-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px var(--nr-gutter);
    padding-block: 8px 34px;
}

.nr-section-package {
    min-width: 0;
    padding-top: 22px;
    border-top: 1px solid var(--nr-rule);
}

.nr-section-package__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(180px, 0.95fr);
    gap: 18px;
}

.nr-section-package__list {
    display: grid;
    align-content: start;
}

.nr-analysis-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: var(--nr-gutter);
    padding-block: 28px;
    border-top: 2px solid var(--nr-ink);
}

.nr-opinion {
    background: var(--nr-soft);
    padding: 18px;
}

.nr-opinion__item {
    padding-block: 14px;
    border-top: 1px solid rgba(17, 19, 23, 0.15);
}

.nr-opinion__item h3 {
    margin: 0;
    font-family: var(--nr-serif);
    font-size: 1.16rem;
    line-height: 1.18;
    font-weight: 900;
}

.nr-opinion__item p {
    margin: 7px 0 0;
    color: var(--nr-muted);
    font-size: 0.86rem;
}

.nr-media-band {
    width: 100%;
    max-width: none;
    background: #111317;
    color: #fff;
}

.nr-media-band.nr-shell {
    width: 100%;
    padding-inline: max(16px, calc((100vw - 1220px) / 2));
}

.nr-block-head--inverse {
    border-color: rgba(255, 255, 255, 0.35);
}

.nr-block-head--inverse span {
    color: rgba(255, 255, 255, 0.72);
}

.nr-media-band__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.nr-card--media .nr-card__media {
    background: #2b3038;
}

.nr-utility-band {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: var(--nr-gutter);
    border-bottom: 1px solid var(--nr-rule);
}

.nr-utility-band__panel {
    background: var(--nr-soft);
    padding: 22px;
    border-left: 4px solid var(--nr-accent);
}

.nr-utility-band__newsletter {
    padding: 22px;
    border: 1px solid var(--nr-rule);
}

.nr-utility-band__eyebrow {
    margin-bottom: 8px;
    color: var(--nr-accent);
    font-size: 0.74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.nr-utility-band__panel h2,
.nr-utility-band__newsletter h2 {
    margin: 0 0 10px;
    font-family: var(--nr-serif);
    font-size: 1.75rem;
    font-weight: 900;
}

.nr-utility-band__panel p,
.nr-utility-band__newsletter p {
    color: var(--nr-muted);
    line-height: 1.5;
}

.nr-utility-band__cover {
    display: block;
    max-width: 220px;
    aspect-ratio: 3 / 4;
    margin: 12px 0 16px;
    overflow: hidden;
    background: #e8eaee;
}

.nr-utility-band__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nr-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 0 14px;
    background: var(--nr-ink);
    color: #fff;
    text-decoration: none;
    font-weight: 800;
}

.nr-utility-band__stories {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 14px;
}

.nr-newsletter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 16px;
}

.nr-newsletter-form input,
.nr-newsletter-form button {
    min-height: 44px;
    border: 1px solid var(--nr-rule);
}

.nr-newsletter-form input {
    padding-inline: 12px;
}

.nr-newsletter-form button {
    padding-inline: 14px;
    background: var(--nr-accent);
    color: #fff;
    font-weight: 900;
}

.nr-utility-link {
    display: inline-block;
    margin-top: 12px;
    color: var(--nr-blue);
    font-weight: 800;
    text-decoration: none;
}

.nr-topics__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.nr-topic {
    display: grid;
    gap: 8px;
    min-height: 118px;
    padding: 16px;
    border: 1px solid var(--nr-rule);
    background: #fff;
}

.nr-topic span {
    color: var(--nr-accent);
    font-size: 0.75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.nr-topic strong {
    font-family: var(--nr-serif);
    font-size: 1.05rem;
    line-height: 1.18;
}

@media (max-width: 1100px) {
    .nr-hero {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);
    }

    .nr-latest {
        grid-column: 1 / -1;
        border-top: 1px solid var(--nr-rule);
        padding-left: 0;
        padding-top: 16px;
    }

    .nr-latest__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }

    .nr-picks,
    .nr-media-band__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .nr-breaking {
        display: none;
    }

    .nr-shell {
        width: min(100% - 24px, 1220px);
    }

    .nr-breaking__inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
        min-height: 0;
        padding-block: 12px;
    }

    .nr-breaking__label {
        min-height: 30px;
        font-size: 0.76rem;
    }

    .nr-breaking__items {
        width: 100%;
    }

    .nr-breaking__items a {
        font-size: 0.95rem;
        padding-right: 16px;
        margin-right: 16px;
    }

    .nr-hero,
    .nr-section-grid,
    .nr-section-pair,
    .nr-analysis-grid,
    .nr-utility-band {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .nr-hero {
        padding-top: 22px;
        padding-bottom: 26px;
    }

    .nr-hero__secondary {
        order: 2;
    }

    .nr-latest {
        order: 3;
    }

    .nr-card--lead .nr-card__title {
        font-size: clamp(1.06rem, 3.7vw, 1.34rem);
        line-height: 1.18;
        min-block-size: calc(4 * 1.18em);
    }

    .nr-card--lead {
        border-radius: 0;
    }

    .nr-card--lead .nr-card__media {
        border-radius: 0;
    }

    .nr-card--lead .nr-card__body {
        padding: 14px 14px 16px;
        min-height: auto;
    }

    .nr-card--lead .nr-meta {
        margin-bottom: 10px;
        font-size: 0.8rem;
    }

    .nr-card--lead .nr-meta__section {
        min-height: 26px;
        padding-inline: 10px;
        font-size: 0.72rem;
    }

    .nr-card--lead .nr-meta__byline,
    .nr-card--lead .nr-meta time {
        font-size: 0.82rem;
    }

    .nr-card--lead .nr-card__deck {
        margin-top: 12px;
        font-size: 0.82rem;
        line-height: 1.55;
        min-block-size: calc(4 * 1.55em);
    }

    .nr-card--secondary {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .nr-card--lead-secondary {
        grid-template-columns: 112px minmax(0, 1fr);
    }

    .nr-latest__list,
    .nr-picks,
    .nr-section-package__grid,
    .nr-media-band__grid,
    .nr-utility-band__stories,
    .nr-topics__grid {
        grid-template-columns: 1fr;
    }

    .nr-section-package {
        padding-top: 18px;
    }

    .nr-block-head {
        align-items: start;
        flex-direction: column;
        gap: 2px;
    }

    .nr-media-band.nr-shell {
        padding-inline: 12px;
    }
}

.nr-format-grid,
.nr-portrait-strip,
.nr-zodiac-grid,
.nr-video-gallery,
.nr-photo-gallery {
    margin-block: 28px;
}

.nr-format-grid__items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.nr-format-grid--count-1 .nr-format-grid__items {
    grid-template-columns: minmax(0, 420px);
}

.nr-format-grid--grid_4 .nr-format-grid__items,
.nr-format-grid--image_grid .nr-format-grid__items {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nr-portrait-strip__track {
    display: grid;
    grid-auto-columns: minmax(170px, 210px);
    grid-auto-flow: column;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
}

.nr-portrait-strip--count-1 .nr-portrait-strip__track {
    grid-auto-columns: minmax(180px, 240px);
}

.nr-video-card,
.nr-gallery-card,
.nr-recipe-card,
.nr-review-card,
.nr-infographic-card,
.nr-opinion-card {
    background: #fff;
    border: 1px solid var(--nr-rule, #dedede);
    border-radius: 8px;
    overflow: hidden;
}

/* A SHORT IS A PICTURE WITH A LINE ON IT.
   This was built like every other card — picture on top, a separate black box of type underneath —
   and at portrait size that box is half the tile: two blocks, one of them empty of everything but
   words, with the picture cropped to nothing above it. Every paper that runs visual stories sets the
   headline INSIDE the frame over a scrim, and so does this now: one frame, the picture full bleed,
   the type lying on it. */
.nr-portrait-card {
    position: relative;
    display: block;
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #11151d;
    scroll-snap-align: start;
    isolation: isolate;
}

.nr-portrait-strip--count-1 .nr-portrait-card {
    aspect-ratio: 9 / 14;
}

/* The scrim: the type's legibility comes from here, not from a box of its own. */
.nr-portrait-card::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    top: 34%;
    background: linear-gradient(to bottom, rgba(8, 11, 17, 0) 0%, rgba(8, 11, 17, .58) 46%, rgba(8, 11, 17, .92) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Specificity on purpose: the shared media rule below sets `position: relative` and comes later, so
   a single-class override lost and the picture kept its own 16:9 height inside a 9:16 frame — the
   band of flat dark under the photograph. The <picture> wrapper needs saying too: it is inline by
   default, so `img { height: 100% }` had nothing definite to resolve against. */
.nr-portrait-card .nr-portrait-card__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.nr-portrait-card .nr-portrait-card__media picture {
    display: block;
    height: 100%;
    width: 100%;
}

.nr-video-card__media,
.nr-gallery-card__media,
.nr-recipe-card__media,
.nr-review-card__media,
.nr-infographic-card__media,
.nr-opinion-card__media,
.nr-portrait-card__media {
    display: block;
    overflow: hidden;
    position: relative;
}

.nr-video-card__media--fallback,
.nr-gallery-card__media--fallback,
.nr-recipe-card__media--fallback,
.nr-review-card__media--fallback,
.nr-infographic-card__media--fallback,
.nr-opinion-card__media--fallback,
.nr-portrait-card__media--fallback {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(31, 95, 139, .16), rgba(155, 28, 28, .10)),
        repeating-linear-gradient(45deg, rgba(17, 24, 39, .055) 0 1px, transparent 1px 13px),
        #f8f6ef;
    display: flex;
    justify-content: center;
}

.nr-portrait-card__media--fallback {
    background:
        linear-gradient(160deg, rgba(17, 24, 39, .92), rgba(88, 28, 28, .74)),
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 30%);
}

.nr-infographic-card__media--fallback {
    background:
        linear-gradient(135deg, rgba(31,95,139,.20), rgba(20,83,45,.10)),
        linear-gradient(90deg, transparent 0 20%, rgba(31,95,139,.10) 20% 24%, transparent 24% 48%, rgba(155,28,28,.10) 48% 52%, transparent 52%);
}

.nr-gallery-card__media--fallback {
    background:
        linear-gradient(135deg, rgba(111, 66, 193, .14), rgba(17, 24, 39, .08)),
        #faf8f3;
}

.nr-recipe-card__media--fallback {
    background:
        linear-gradient(135deg, rgba(20,83,45,.14), rgba(202,138,4,.14)),
        #fffdf7;
}

.nr-media-fallback {
    align-items: center;
    color: #202734;
    display: grid;
    gap: 8px;
    justify-items: center;
    padding: 18px;
    text-align: center;
}

.nr-media-fallback,
.nr-media-fallback * {
    text-decoration: none;
}

.nr-portrait-card__media--fallback .nr-media-fallback {
    color: #fff;
}

.nr-media-fallback__icon {
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
    line-height: 1;
    min-width: 68px;
    padding: 9px 12px;
}

.nr-media-fallback__label {
    font-family: var(--nr-serif, Georgia, serif);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
}

.nr-video-card__media,
.nr-gallery-card__media,
.nr-recipe-card__media,
.nr-review-card__media,
.nr-infographic-card__media,
.nr-opinion-card__media {
    aspect-ratio: 16 / 9;
}

.nr-video-card__media img,
.nr-gallery-card__media img,
.nr-recipe-card__media img,
.nr-review-card__media img,
.nr-infographic-card__media img,
.nr-opinion-card__media img,
.nr-portrait-card__media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.nr-video-card__body,
.nr-gallery-card__body,
.nr-recipe-card__body,
.nr-review-card__body,
.nr-infographic-card__body,
.nr-opinion-card__body,
.nr-portrait-card__body {
    padding: 12px;
}

.nr-portrait-card__body {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    background: none;
    color: #fff;
    padding: 14px 13px 13px;
}

.nr-portrait-card__body a {
    color: #fff;
}

.nr-portrait-card__body p {
    color: rgba(255,255,255,.78);
}

/* "Swipe story" repeats the strip's own subtitle and, laid over a picture, is one line of
   furniture too many. The label above the headline already says what this is. */
.nr-portrait-card__body small {
    display: none;
}

.nr-portrait-card .nr-format-label {
    color: #ff5b5b;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

.nr-portrait-card__body h3 {
    /* Three lines is a headline on a tile; past that it is a paragraph fighting the picture. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 5px 0 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    text-wrap: balance;
}

.nr-video-card__body h3,
.nr-gallery-card__body h3,
.nr-recipe-card__body h3,
.nr-review-card__body h3,
.nr-infographic-card__body h3,
.nr-opinion-card__body h3,
.nr-portrait-card__body h3 {
    font-family: var(--nr-serif, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.16;
    margin: 6px 0;
}

.nr-video-card__body h3 a,
.nr-gallery-card__body h3 a,
.nr-recipe-card__body h3 a,
.nr-review-card__body h3 a,
.nr-infographic-card__body h3 a,
.nr-opinion-card__body h3 a,
.nr-portrait-card__body h3 a {
    color: inherit;
    text-decoration: none;
}

.nr-video-card__body h3 a:hover,
.nr-gallery-card__body h3 a:hover,
.nr-recipe-card__body h3 a:hover,
.nr-review-card__body h3 a:hover,
.nr-infographic-card__body h3 a:hover,
.nr-opinion-card__body h3 a:hover,
.nr-portrait-card__body h3 a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.nr-video-card__body p,
.nr-gallery-card__body p,
.nr-recipe-card__body p,
.nr-review-card__body p,
.nr-infographic-card__body p,
.nr-opinion-card__body p {
    color: #5f6470;
    font-size: .9rem;
    line-height: 1.42;
    margin: 6px 0 0;
}

.nr-format-label {
    color: #9b1c1c;
    display: inline-block;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.nr-play {
    align-items: center;
    background: rgba(0, 0, 0, .72);
    border-radius: 999px;
    bottom: 10px;
    display: inline-flex;
    height: 38px;
    justify-content: center;
    position: absolute;
    right: 10px;
    width: 38px;
}

.nr-play::before {
    border-bottom: 8px solid transparent;
    border-left: 12px solid #fff;
    border-top: 8px solid transparent;
    content: "";
    margin-left: 3px;
}

.nr-media-band .nr-video-card,
.nr-media-band .nr-video-card__body {
    background: #11151d;
    border-color: rgba(255,255,255,.12);
    color: #fff;
}

.nr-media-band .nr-video-card__body p,
.nr-media-band .nr-video-card__body small {
    color: rgba(255,255,255,.72);
}

.nr-video-gallery {
    background: #11151d;
    border: 1px solid rgba(255,255,255,.10);
    color: #fff;
    padding-block: 22px;
}

.nr-video-gallery__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
}

.nr-video-gallery__support {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

.nr-video-gallery--video_gallery_grid .nr-video-gallery__grid,
.nr-video-gallery--count-1 .nr-video-gallery__grid {
    grid-template-columns: 1fr;
}

.nr-video-gallery--count-1 .nr-video-gallery__lead {
    max-width: 560px;
}

.nr-video-gallery .nr-video-card,
.nr-video-gallery .nr-video-card__body {
    background: #171c26;
    border-color: rgba(255,255,255,.12);
    color: #fff;
}

.nr-video-gallery .nr-video-card__body h3 {
    font-size: 1rem;
}

.nr-video-gallery__lead .nr-video-card__body h3 {
    font-size: clamp(1.35rem, 2.1vw, 2rem);
}

.nr-video-gallery .nr-video-card__body p,
.nr-video-gallery .nr-video-card__body small {
    color: rgba(255,255,255,.72);
}

.nr-video-gallery__support .nr-video-card {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
}

.nr-video-gallery__support .nr-video-card__media {
    height: 100%;
}

.nr-photo-gallery__grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
}

.nr-photo-gallery__support {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nr-photo-gallery--photo_gallery_grid .nr-photo-gallery__grid,
.nr-photo-gallery--count-1 .nr-photo-gallery__grid {
    grid-template-columns: 1fr;
}

.nr-photo-gallery--count-1 .nr-photo-gallery__lead {
    max-width: 380px;
}

.nr-photo-gallery__lead .nr-gallery-card__media {
    aspect-ratio: 4 / 3;
}

.nr-photo-gallery--count-1 .nr-photo-gallery__lead .nr-gallery-card__media {
    aspect-ratio: 16 / 9;
}

.nr-photo-gallery__support .nr-gallery-card__media,
.nr-format-grid--count-1 .nr-gallery-card__media,
.nr-format-grid--count-1 .nr-infographic-card__media {
    aspect-ratio: 16 / 10;
}

.nr-photo-gallery__lead .nr-gallery-card__body h3 {
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
}

.nr-gallery-card__media--fallback,
.nr-infographic-card__media--fallback {
    min-height: 0;
}

.nr-format-grid--count-1 .nr-infographic-card,
.nr-format-grid--count-1 .nr-gallery-card,
.nr-format-grid--count-1 .nr-recipe-card {
    max-width: 420px;
}

.nr-recipe-card {
    background: #fffdf7;
}

.nr-recipe-card .nr-format-label {
    color: #166534;
}

.nr-infographic-card {
    border-left: 4px solid #1f5f8b;
}

.nr-infographic-card .nr-format-label {
    color: #1f5f8b;
}

.nr-review-card {
    border-top: 4px solid #111827;
}

.nr-opinion-card {
    background: #fafafa;
}

.nr-zodiac-grid__items {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}

.nr-horoscope-card {
    background: #fff;
    border: 1px solid var(--nr-rule, #dedede);
    border-radius: 8px;
    min-height: 144px;
    padding: 12px;
}

.nr-horoscope-card__link {
    align-items: center;
    color: inherit;
    display: flex;
    gap: 10px;
    text-decoration: none;
}

.nr-horoscope-card__link img {
    flex: 0 0 56px;
    height: 56px;
    object-fit: contain;
    width: 56px;
}

.nr-horoscope-card strong {
    display: block;
    font-family: var(--nr-serif, Georgia, serif);
    font-size: 1rem;
    line-height: 1.1;
}

.nr-horoscope-card small {
    color: #68707d;
    display: block;
    font-size: .76rem;
    margin-top: 3px;
}

.nr-horoscope-card p {
    color: #454b57;
    display: -webkit-box;
    font-size: .86rem;
    line-height: 1.36;
    margin: 10px 0 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 980px) {
    .nr-format-grid__items,
    .nr-format-grid--grid_4 .nr-format-grid__items,
    .nr-format-grid--image_grid .nr-format-grid__items,
    .nr-video-gallery__grid,
    .nr-photo-gallery__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nr-video-gallery__support .nr-video-card {
        grid-template-columns: 1fr;
    }

    .nr-zodiac-grid__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .nr-format-grid__items,
    .nr-format-grid--grid_4 .nr-format-grid__items,
    .nr-format-grid--image_grid .nr-format-grid__items,
    .nr-video-gallery__grid,
    .nr-photo-gallery__grid,
    .nr-photo-gallery__support {
        grid-template-columns: 1fr;
    }

    .nr-zodiac-grid__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nr-zodiac-grid--compact .nr-zodiac-grid__items {
        display: grid;
        grid-auto-columns: minmax(210px, 78vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: 8px;
        scroll-snap-type: x mandatory;
    }

    .nr-horoscope-card {
        min-height: 128px;
    }
}
.transition-all {
    transition: all 0.3s ease;
}

/* Feature Hero */.z-2 { z-index: 2; }

.feature-hero-gradient {
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,0.9) 22%, transparent 45%),
                linear-gradient(270deg, #000 0%, rgba(0,0,0,0.9) 22%, transparent 45%);
}

.feature-icon-box {
    min-width: 28px;
    height: 28px;
    padding: 0 4px;
    font-family: serif;
    border-radius: 2px;
}

.font-serif-1-1rem {
    font-family: serif;
    font-size: 1.1rem;
}

.font-serif-hero-title {
    font-family: serif;
    line-height: 1.15;
    font-size: 2.5rem;
}

.letter-spacing-1px {
    letter-spacing: 1px;
}

.hover-opacity:hover { opacity: 0.9; }
.group-hover:hover .transition-transform { transform: translateX(5px); }

/* Borders */
.border-dashed-y-4 {
    border-bottom: 1px dashed #ccc;
    border-top: 1px dashed #ccc;
    height: 4px;
}

.border-dotted-bottom {
    border-bottom-style: dotted !important;
    border-bottom-width: 2px !important;
    border-color: #e0e0e0 !important;
}

.border-dotted-black {
    border-bottom: 1px dotted #000;
}

.alert-border-dashed {
    border-style: dashed !important;
}

/* Colors */
.hover-bg-gray:hover {
    background-color: #e9ecef !important;
}

.transition-transform {
    transition: transform 0.3s ease;
}

.hover-brand:hover {
    color: var(--bs-primary) !important;
}

.pagination-dot {
    width: 8px; 
    height: 8px;
}

/* Animations */
/* Missing Utility Classes for Hardcoded Styles */
.top-20px { top: 20px !important; }
.z-index-10 { z-index: 10 !important; }
.mt-n80px { margin-top: -80px !important; }
.w-30px { width: 30px !important; }
.h-30px { height: 30px !important; }
.left-n15px { left: -15px !important; }
.ls-1px { letter-spacing: 1px !important; }
.ml-5px { margin-left: 5px !important; }
.border-bottom-dotted { border-bottom: 1px dotted #000 !important; }
.line-height-1-3 { line-height: 1.3 !important; }
.font-size-1-1rem { font-size: 1.1rem !important; }
.font-size-1rem { font-size: 1rem !important; }
.font-size-0-8rem { font-size: 0.8rem !important; }

/* New Utility Classes Added */
.w-auto { width: auto !important; }
.h-28px { height: 28px !important; }
.w-05rem { width: 0.5rem !important; }
.h-05rem { height: 0.5rem !important; }
.w-85 { width: 85% !important; }
.max-w-350px { max-width: 350px !important; }
.px-10px { padding-left: 10px !important; padding-right: 10px !important; }
.py-2px { padding-top: 2px !important; padding-bottom: 2px !important; }

/* Image Hover Zoom Effect */
.img-hover-zoom {
    overflow: hidden;
    display: block;
}
.img-hover-zoom img {
    transition: transform 0.5s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.05);
}

.img-hover-zoom:hover img {
    transform: scale(1.05);
}

/* Web Story & Visual Story Overrides */
.ws-track-combined {
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.ws-track-combined::-webkit-scrollbar {
    display: none;
}

/* Phone Mockup Utilities */
.phone-mockup-border {
    border: 10px solid #1a1a1a;
    border-radius: 35px;
}
.phone-status-gradient {
    background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(255,255,255,0));
}
.phone-btn {
    position: absolute;
    background-color: #212529;
    border-radius: 0.25rem 0 0 0.25rem;
}
.phone-btn-right {
    position: absolute;
    background-color: #212529;
    border-radius: 0 0.25rem 0.25rem 0;
}
.phone-btn-vol-up {
    width: 3px; height: 50px; top: 120px; left: -3px;
}
.phone-btn-vol-down {
    width: 3px; height: 50px; top: 180px; left: -3px;
}
.phone-btn-power {
    width: 3px; height: 70px; top: 110px; right: -3px;
}
.phone-notch {
    width: 100px; height: 26px;
}
.phone-speaker {
    width: 30px; height: 6px; border: 1px solid #333;
}
.phone-camera {
    width: 8px; height: 8px; border: 1px solid #333;
}
.phone-home-indicator {
    width: 120px; height: 5px; opacity: 0.2;
}

/* Typography Utilities */
.ls-0px { letter-spacing: 0px; }
.lh-1-4 { line-height: 1.4; }

@media (max-width: 991.98px) {
    .homepage-site-header--regional .homepage-utility-bar--regional,
    .homepage-site-header--regional .homepage-nav-home--desktop,
    .homepage-site-header--regional .homepage-desktop-nav-collapse {
        display: none !important;
    }

    .homepage-site-header--regional .homepage-branding-row,
    .homepage-site-header--regional .homepage-branding-row--regional,
    .homepage-site-header--regional .homepage-weather-card,
    .homepage-site-header--regional .homepage-header-extras--regional,
    .homepage-site-header--regional .homepage-brand-tagline {
        display: none !important;
    }

    .homepage-site-header--regional .homepage-header-shell {
        width: 100% !important;
        max-width: none !important;
        padding-inline: 0 !important;
    }

    .homepage-site-header--regional .homepage-navigation-row {
        min-height: 58px !important;
        block-size: auto !important;
        overflow: visible !important;
    }

    .homepage-site-header--regional .homepage-navigation-row .homepage-mobile-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        min-height: 58px !important;
        block-size: 58px !important;
        padding: 0.375rem 0.75rem !important;
        gap: 0.5rem !important;
        overflow: hidden !important;
    }

    .homepage-mobile-topbar__secondary {
        flex: 0 0 auto;
        min-width: 0;
        max-width: 48%;
        justify-content: flex-end;
    }

    .homepage-mobile-place-trigger {
        justify-content: flex-start;
        flex: 0 0 auto;
        min-width: 0;
        white-space: nowrap;
        color: #111827 !important;
        font-weight: 800;
        line-height: 1;
    }

    /* Label is the short "शहर" (not "शहर चुनें"), so it doesn't need
       truncation -- and truncation combined with flex-shrink was cutting
       it down to a single stray character with no visible ellipsis. */
    .homepage-mobile-place-trigger__label {
        font-size: 0.85rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (min-width: 992px) {
    .homepage-utility-bar--regional .homepage-utility-meta {
        min-width: 420px;
        justify-content: flex-end;
    }

    .homepage-nav-actions {
        min-width: 148px;
        justify-content: flex-end;
    }

    .homepage-utility-date {
        min-width: 20.5rem;
    }

    .daily-habit-rail {
        block-size: 83.2px;
    }
}

.homepage-utility-date {
    min-width: 19.5rem;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    justify-content: flex-end;
}

.daily-habit-rail {
    block-size: 62px;
}

.daily-habit-rail__container {
    block-size: 100%;
}

.daily-habit-rail__scroll {
    block-size: 48px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.daily-habit-rail__item {
    block-size: 48px;
    list-style: none;
}

.daily-habit-rail__chip {
    block-size: 48px;
}

@media (min-width: 992px) {
    .daily-habit-rail {
        min-block-size: 3.8rem;
        min-height: 60px;
        block-size: 60px;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}
.homepage-main {
  background:
    linear-gradient(180deg, #f8f6f1 0, #ffffff 180px),
    #ffffff;
}

.homepage-reader-shell {
  position: relative;
}

.homepage-reader-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 220px;
  background: linear-gradient(180deg, rgba(17, 24, 39, 0.025), rgba(17, 24, 39, 0));
  pointer-events: none;
}

.homepage-main > section,
.homepage-main > .container {
  position: relative;
}

.homepage-main > section + section,
.homepage-main > .container + section,
.homepage-main > section + .container {
  margin-top: 0.25rem;
}

.homepage-section-block {
  padding-block: 2.5rem !important;
}

.homepage-surface-neutral,
.homepage-surface-warm,
.homepage-surface-editorial,
.homepage-surface-visual,
.homepage-surface-ink {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
}

.homepage-surface-neutral::after,
.homepage-surface-warm::after,
.homepage-surface-editorial::after,
.homepage-surface-visual::after,
.homepage-surface-ink::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.05);
}

.homepage-surface-neutral {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 251, 0.98));
}

.homepage-surface-warm {
  background: linear-gradient(180deg, rgba(251, 247, 239, 0.95), rgba(255, 255, 255, 0.98));
}

.homepage-surface-editorial {
  background: linear-gradient(180deg, rgba(248, 246, 241, 0.98), rgba(255, 255, 255, 0.98));
}

.homepage-surface-visual {
  background: linear-gradient(180deg, rgba(248, 246, 241, 0.92), rgba(255, 255, 255, 1));
}

.homepage-surface-ink {
  background: linear-gradient(180deg, rgba(244, 246, 248, 0.98), rgba(255, 255, 255, 0.98));
}

.homepage-section-block + .homepage-section-block::before,
.homepage-section-block + .homepage-hero-section::before,
.homepage-hero-section + .homepage-section-block::before {
  content: "";
  position: absolute;
  inset: 0.05rem 0.75rem auto;
  block-size: 1px;
  background: linear-gradient(90deg, rgba(17, 24, 39, 0), rgba(17, 24, 39, 0.14), rgba(17, 24, 39, 0));
}

.homepage-section-header {
  padding-bottom: 0.4rem !important;
}

.homepage-section-title {
  font-family: var(--ntcms-font-family-sans);
  font-size: 0.88rem;
  letter-spacing: 0.12em;
}

.homepage-section-link {
  letter-spacing: 0.08em;
  transition: color var(--ntcms-motion-duration-fast) var(--ntcms-motion-ease-standard);
}

.homepage-section-link:hover {
  color: #b91c1c !important;
}

.homepage-section-chip {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 0.55rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.homepage-section-chip-video,
.homepage-section-chip-featured {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}

.homepage-section-chip-topic,
.homepage-section-chip-shorts {
  background: rgba(185, 28, 28, 0.08);
  color: #b91c1c;
}

.homepage-section-chip-visual {
  margin-bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
}

.homepage-section-chip-opinion {
  background: rgba(30, 64, 175, 0.08);
  color: #1e40af;
}

.editorial-top-story-meta {
  margin-bottom: 0.35rem;
  color: var(--ntcms-color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.editorial-story-freshness {
  margin-bottom: 0.55rem;
  color: var(--ntcms-color-text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.editorial-kicker {
  display: inline-block;
  margin-bottom: 0.6rem;
  color: #b91c1c;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.editorial-title {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ntcms-color-text-default);
}

.editorial-subtitle {
  color: var(--ntcms-color-text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.font-sans {
  font-family: var(--ntcms-font-family-sans) !important;
}

.font-georgia {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
}

.font-serif-display {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
}

.font-serif-display-lg {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1.75rem;
  line-height: 1.2;
  font-weight: 700;
}

.font-serif-display-md {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1.25rem;
  font-weight: 700;
}

.font-serif-display-sm {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1rem;
  font-weight: 700;
}

.font-serif-body {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1rem;
  line-height: 1.6;
}

.font-sans-meta {
  font-family: var(--ntcms-font-family-sans);
  font-size: 0.85rem;
}

.font-sans-uppercase-lg {
  font-family: var(--ntcms-font-family-sans);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

.font-sans-uppercase-sm {
  font-family: var(--ntcms-font-family-sans);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

.font-sans-uppercase-xs {
  font-family: var(--ntcms-font-family-sans);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}

.font-sans-uppercase-xxs {
  font-family: var(--ntcms-font-family-sans);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
}

.font-serif-devanagari {
  font-family: "Noto Serif Devanagari", var(--font-heading, var(--ntcms-font-family-serif));
}

.sub-hero-title {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-weight: 700;
}

.ls-0 {
  letter-spacing: 0;
}

.ls-05em {
  letter-spacing: 0.05em;
}

.fs-07rem {
  font-size: 0.7rem !important;
}

.fs-08rem {
  font-size: 0.8rem;
}

.fs-09rem {
  font-size: 0.9rem;
}

.fs-095rem {
  font-size: 0.95rem;
}

.fs-1rem {
  font-size: 1rem;
}

.fs-1-1rem {
  font-size: 1.1rem;
}

.lh-13 {
  line-height: 1.3;
}

.lh-14 {
  line-height: 1.4;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.aj-orange-text {
  color: #f58e08;
}

.blink-animation,
.homepage-live-indicator {
  animation: homepage-blink 1.5s infinite;
}

@keyframes homepage-blink {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.homepage-trending-shell {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ntcms-color-surface-default) 98%, white) 0%, var(--ntcms-color-surface-muted) 100%);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--ntcms-color-border-default) 72%, transparent);
}

.aj-trending-wrapper {
  block-size: 40px;
  font-family: var(--ntcms-font-family-sans);
  font-size: 14px;
  position: relative;
  z-index: 9;
  background: #fff;
}

.aj-trending-wrapper .navigation-bar {
  display: flex;
  align-items: center;
  inline-size: auto;
  margin-inline: auto;
  padding-inline: 20px;
  white-space: nowrap;
}

.aj-trending-wrapper .navigation-bar::before {
  content: "";
  display: inline-block;
  inline-size: 18px;
  block-size: 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='10' viewBox='0 0 18 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.833 10L.667 8.833l6.166-6.208 3.334 3.333L14.5 1.667h-2.167V0h5v5h-1.666V2.833l-5.5 5.5L6.833 5l-5 5z' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 10px;
  flex-shrink: 0;
}

.homepage-trending-scroll {
  min-block-size: 46px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.homepage-trending-scroll::-webkit-scrollbar {
  display: none;
}

.homepage-trending-bar {
  gap: 1rem;
  padding-block: 0.2rem;
}

.homepage-trending-label {
  position: relative;
  flex-shrink: 0;
  padding-right: 1rem;
  color: var(--ntcms-color-text-default);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.homepage-trending-label::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto auto;
  inline-size: 1px;
  block-size: 16px;
  background: rgba(17, 24, 39, 0.14);
  transform: translateY(-50%);
}

.homepage-trending-menu {
  gap: 0.9rem;
}

.homepage-trending-item {
  position: relative;
  margin-right: 0 !important;
  color: #4b5563 !important;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color var(--ntcms-motion-duration-fast) var(--ntcms-motion-ease-standard);
}

.homepage-trending-item:hover {
  color: #b91c1c !important;
}

.homepage-trending-item + .homepage-trending-item {
  padding-left: 0.95rem;
}

.homepage-trending-item + .homepage-trending-item::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.28);
  transform: translateY(-50%);
}

.aj-trending-wrapper .navigation-bar__menu {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aj-trending-wrapper .navigation-bar__item {
  color: #121212 !important;
  padding-block: 5px;
  transition: color var(--ntcms-motion-duration-fast) var(--ntcms-motion-ease-standard);
}

.aj-trending-wrapper .navigation-bar__item:hover {
  color: #000 !important;
  text-decoration: underline !important;
}

.aj-trending-wrapper .trending-arrow {
  background: #fff;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 100%;
  position: absolute;
  inset-block-start: 0;
  z-index: 10;
}

.aj-trending-wrapper .arrow-left {
  inset-inline-start: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
  padding-right: 15px;
  justify-content: flex-start;
  padding-left: 15px;
}

.aj-trending-wrapper .arrow-right {
  inset-inline-end: 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 0) 100%);
  padding-left: 15px;
  justify-content: flex-end;
  padding-right: 15px;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.homepage-hero-section,
.homepage-hero-cluster--secondary {
  padding-top: 1.4rem !important;
  padding-bottom: 2.35rem !important;
}

.homepage-hero-grid {
  align-items: start;
}

.homepage-hero-column-divider {
  border-right: 1px solid rgba(17, 24, 39, 0.08);
}

.homepage-hero-main {
  margin-bottom: 0 !important;
}

.homepage-hero-image-link,
.homepage-sublead-thumb,
.homepage-center-lead-media,
.homepage-center-secondary-thumb,
.homepage-multi-feature-media {
  overflow: hidden;
}

.homepage-hero-image-link .c-card__thumb,
.homepage-hero-image-link img,
.homepage-sublead-thumb .c-card__thumb,
.homepage-sublead-thumb img,
.homepage-center-lead-media .c-card__thumb,
.homepage-center-lead-media img,
.homepage-center-secondary-thumb .c-card__thumb,
.homepage-center-secondary-thumb img,
.homepage-multi-feature-media .c-card__thumb,
.homepage-multi-feature-media img {
  transition: transform var(--ntcms-motion-duration-normal) var(--ntcms-motion-ease-standard);
}

.homepage-hero-image-link:hover .c-card__thumb,
.homepage-hero-image-link:focus-visible .c-card__thumb,
.homepage-hero-image-link:hover img,
.homepage-hero-image-link:focus-visible img,
.homepage-sublead-thumb:hover .c-card__thumb,
.homepage-sublead-thumb:focus-visible .c-card__thumb,
.homepage-center-lead-media:hover .c-card__thumb,
.homepage-center-lead-media:focus-visible .c-card__thumb,
.homepage-center-secondary-thumb:hover .c-card__thumb,
.homepage-center-secondary-thumb:focus-visible .c-card__thumb,
.homepage-multi-feature-media:hover .c-card__thumb,
.homepage-multi-feature-media:focus-visible .c-card__thumb {
  transform: scale(1.03);
}

.homepage-hero-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 22px;
}

.homepage-lead-story {
  display: grid;
  gap: 1.15rem;
}

.homepage-lead-story__media-shell {
  position: relative;
}

.homepage-lead-story__content {
  display: grid;
  gap: 0.85rem;
  max-inline-size: 46rem;
}

.homepage-lead-story__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.homepage-lead-story__freshness {
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 600;
}

.homepage-hero-main-card {
  z-index: 1;
  max-inline-size: none;
  margin-inline: 0;
  padding: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}

.homepage-lead-story__dek {
  max-inline-size: 44rem;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.65;
}

.homepage-hero-eyebrow {
  color: #b91c1c;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.homepage-hero-eyebrow-dot {
  font-size: 0.5rem;
}

.homepage-live-updates-icon {
  font-size: 1rem;
}

.homepage-live-updates-label {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

.homepage-live-update-time {
  white-space: nowrap;
  font-size: 0.85rem;
}

.homepage-live-update-copy {
  line-height: 1.4;
  font-size: 0.95rem;
}

.homepage-sublead-story {
  padding-top: 1rem !important;
  margin-top: 1rem !important;
  border-color: rgba(17, 24, 39, 0.1) !important;
}

.homepage-sublead-story--refined .sub-hero-title {
  font-size: 1.2rem;
  line-height: 1.3;
}

.homepage-sublead-story__meta {
  margin-bottom: 0.35rem;
}

.homepage-sublead-story__dek {
  color: #6b7280;
  font-size: 0.88rem;
  line-height: 1.5;
}

.homepage-sublead-media-wrap {
  inline-size: 9.5rem;
}

.homepage-sublead-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.homepage-sublead-eyebrow {
  color: #b91c1c;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.homepage-hero-center-column {
  gap: 0.2rem;
}

.homepage-center-rail-label {
  margin-bottom: 0.9rem;
  color: #64748b;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.homepage-center-lead-story,
.homepage-center-secondary-story,
.homepage-center-list-story {
  border-color: rgba(17, 24, 39, 0.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.homepage-center-lead-story .sub-hero-title,
.homepage-center-secondary-story .sub-hero-title,
.homepage-center-list-story .sub-hero-title {
  letter-spacing: -0.01em;
}

.homepage-center-lead-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.homepage-center-lead-title {
  font-size: 1.18rem;
  line-height: 1.28;
}

.homepage-center-live-badge {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
}

.homepage-center-secondary-media-wrap {
  inline-size: 5.3125rem;
}

.homepage-center-secondary-image {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.homepage-center-secondary-title {
  font-size: 0.98rem;
  line-height: 1.38;
}

.homepage-center-list-title {
  font-size: 0.95rem;
  line-height: 1.4;
}

.homepage-sidebar-rail {
  border-left: 1px solid rgba(17, 24, 39, 0.08);
  padding-left: 1.05rem;
}

.homepage-sidebar-heading-wrap {
  margin-bottom: 0.7rem !important;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(17, 24, 39, 0.14);
}

.homepage-sidebar-kicker {
  margin-bottom: 0.25rem;
  color: #64748b;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.homepage-sidebar-heading {
  font-family: var(--ntcms-font-family-sans);
  font-size: 1rem !important;
  letter-spacing: 0.06em !important;
}

.homepage-sidebar-list {
  gap: 0;
}

.homepage-sidebar-story-title {
  font-family: var(--ntcms-font-family-sans);
  font-size: 0.96rem !important;
  line-height: 1.34 !important;
  font-weight: 500 !important;
}

.homepage-sidebar-story-title a:hover {
  color: #b91c1c !important;
}

.homepage-sidebar-story {
  padding-block: 0.85rem !important;
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.homepage-opinion-rail--divided {
  border-left: 1px solid #dee2e6;
}

.homepage-visual-shorts-section {
  background:
    linear-gradient(180deg, rgba(248, 246, 241, 0.85) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.homepage-visual-stories-rail {
  padding-top: 0.4rem;
}

.homepage-visual-stories-rail-full .web-stories-track {
  flex-wrap: wrap;
  overflow: visible !important;
}

.homepage-visual-story-item {
  width: min(240px, 58vw);
}

.homepage-visual-story-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.web-story-item-combined {
  scroll-snap-align: start;
  width: 45%;
}

.homepage-visual-story-media-featured {
  aspect-ratio: 16 / 9;
}

.homepage-visual-story-media-standard {
  aspect-ratio: 9 / 16;
}

.homepage-visual-nav--prev {
  inline-size: 35px;
  block-size: 35px;
  left: -15px !important;
}

.homepage-visual-nav--next {
  inline-size: 35px;
  block-size: 35px;
  right: -15px !important;
}

.nav-btn-lg {
  inline-size: 40px;
  block-size: 40px;
}

.nav-btn-lg.nav-btn-prev {
  left: -20px !important;
}

.nav-btn-lg.nav-btn-next {
  right: -20px !important;
}

.homepage-epaper-nav-hint {
  inline-size: 30px;
  block-size: 30px;
  left: -15px !important;
  z-index: 10;
}

.shorts-phone-container {
  border: 8px solid #212529;
  border-radius: 2.5rem;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 500px;
  max-block-size: 600px;
}

.shorts-phone-side-btn {
  inline-size: 3px;
  position: absolute;
  background-color: #212529;
}

.shorts-phone-mute {
  block-size: 30px;
  top: 70px;
  left: -3px;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.shorts-phone-vol-up {
  block-size: 50px;
  top: 120px;
  left: -3px;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.shorts-phone-vol-down {
  block-size: 50px;
  top: 180px;
  left: -3px;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.shorts-phone-power {
  block-size: 70px;
  top: 110px;
  right: -3px;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.shorts-phone-status-bar {
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}

.shorts-phone-time {
  font-size: 13px;
  letter-spacing: 0.5px;
}

.shorts-phone-notch {
  inline-size: 100px;
  block-size: 26px;
}

.shorts-phone-camera {
  inline-size: 8px;
  block-size: 8px;
  border: 1px solid #333;
}

.shorts-phone-speaker {
  inline-size: 30px;
  block-size: 6px;
  border: 1px solid #333;
}

.shorts-phone-home-indicator {
  inline-size: 120px;
  block-size: 5px;
  opacity: 0.2;
}

.homepage-visual-shorts-section .short-card .small.text-secondary {
  -webkit-line-clamp: 8 !important;
}

.shorts-app-header {
  pointer-events: auto;
}

.shorts-brand-name {
  color: #d71920;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.shorts-brand-tail {
  color: #111;
  font-style: italic;
}

.w-80px {
  width: 80px;
}

.h-80px {
  height: 80px;
}

.min-w-100px {
  min-width: 100px;
}

.bg-orange-light {
  background-color: #fff0e6;
}

.transition-transform-02 {
  transition: transform 0.2s;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.zodiac-icon-wrapper:hover {
  transform: scale(1.15);
  border-color: #ff9900 !important;
  background-color: #ffe0cc !important;
  box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
}

@media (min-width: 992px) {
  .border-start-lg {
    border-left: 1px solid #dee2e6 !important;
  }

  .border-end-dotted {
    border-right: 1px dotted #ccc;
  }

  .border-end-news {
    border-right: 1px solid #dee2e6;
  }
}

.aspect-ratio-16x9 {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.aspect-ratio-16x10 {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.aspect-ratio-4x3 {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.object-pos-top {
  object-position: top;
}

.epaper-read-btn {
  background-color: #ffc107;
  border-radius: 0;
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
}

.homepage-sublead-story.c-card,
.homepage-center-lead-story.c-card,
.homepage-center-secondary-story.c-card,
.homepage-center-list-story.c-card,
.homepage-sidebar-story.c-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.homepage-sublead-story.c-card,
.homepage-center-secondary-story.c-card {
  flex-direction: row;
}

.homepage-sublead-thumb.c-card__media,
.homepage-center-secondary-thumb.c-card__media,
.homepage-hero-slider-side-thumb.c-card__media {
  border: 0;
  border-radius: var(--ntcms-radius-md);
  background: var(--ntcms-color-surface-muted);
}

.homepage-center-lead-story.c-card {
  gap: var(--ntcms-space-3);
}

.homepage-center-lead-story .c-card__media {
  border: 0;
  border-radius: var(--ntcms-radius-lg);
}

.homepage-sidebar-story.c-card {
  padding-block: 0.7rem;
  border-bottom: 1px dotted rgba(17, 24, 39, 0.22);
}

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

.p-home-bundles .homepage-bundle-card {
  min-block-size: 100%;
}

.p-home-bundles .homepage-bundle-card .c-card__title {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: clamp(1.15rem, 1rem + 0.4vw, 1.45rem);
}

.p-home-multimedia .multimedia-desk-panel.c-card {
  gap: var(--ntcms-space-4);
  min-block-size: 100%;
}

.p-home-multimedia .multimedia-desk-card.c-card {
  gap: var(--ntcms-space-4);
  flex-direction: row;
  align-items: stretch;
  padding: var(--ntcms-space-3);
  border-radius: var(--ntcms-radius-lg);
}

.p-home-multimedia .multimedia-desk-thumb.c-card__media {
  inline-size: 10rem;
  min-inline-size: 10rem;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--ntcms-radius-lg);
}

.p-home-multimedia .multimedia-desk-body .c-card__title {
  font-size: 1rem;
  line-height: 1.4;
}

.p-home-multimedia .multimedia-desk-play {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.76);
  color: var(--ntcms-color-text-inverse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: auto auto 0.75rem 0.75rem;
  box-shadow: var(--ntcms-shadow-md);
}

.p-home-multimedia .multimedia-desk-thumb {
  position: relative;
  overflow: hidden;
}

.p-home-multimedia .multimedia-desk-thumb-fallback {
  inline-size: 100%;
  block-size: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ntcms-color-surface-muted) 0%, color-mix(in srgb, var(--ntcms-color-accent-default) 12%, var(--ntcms-color-surface-default)) 100%);
  color: var(--ntcms-color-accent-default);
  font-size: 1.5rem;
}

.homepage-visual-story-card.c-card {
  min-block-size: 100%;
}

.homepage-visual-story-card .c-card__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--ntcms-space-4);
}

.homepage-visual-story-title.c-card__title {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1rem;
  line-height: 1.28;
  max-inline-size: 24ch;
  text-wrap: balance;
}

.homepage-visual-story-fallback {
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--ntcms-color-accent-default) 20%, transparent), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--ntcms-color-surface-muted) 96%, white) 0%, color-mix(in srgb, var(--ntcms-color-surface-raised) 96%, var(--ntcms-color-surface-default)) 100%);
  color: var(--ntcms-color-text-default);
}

.homepage-visual-story-fallback-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.homepage-visual-story-fallback-mark {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 2.5rem;
  line-height: 1;
}

.homepage-visual-story-fallback-copy {
  font-size: 0.85rem;
  color: var(--ntcms-color-text-muted);
}

.homepage-short-card.c-card {
  gap: 0;
  padding: 0;
  border-radius: 1.2rem;
  border-color: color-mix(in srgb, var(--ntcms-color-border-default) 60%, transparent);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
}

.homepage-short-card .c-card__media {
  border: 0;
  border-radius: 0;
}

.homepage-short-card .c-card__body {
  gap: var(--ntcms-space-3);
}

.p-home-horoscope .homepage-horoscope-card.c-card {
  min-inline-size: 7rem;
  padding: var(--ntcms-space-3);
  border-color: color-mix(in srgb, var(--ntcms-color-border-default) 64%, transparent);
  box-shadow: var(--ntcms-shadow-sm);
  background: linear-gradient(180deg, #fff8ef 0%, var(--ntcms-color-surface-default) 100%);
}

.p-home-horoscope .homepage-horoscope-card .c-card__media {
  inline-size: 5rem;
  block-size: 5rem;
  margin-inline: auto;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ntcms-color-border-default) 72%, transparent);
  background: color-mix(in srgb, var(--ntcms-color-accent-default) 10%, var(--ntcms-color-surface-default));
}

.homepage-horoscope-title {
  font-family: "Noto Serif Devanagari", var(--font-heading, var(--ntcms-font-family-serif));
}

.homepage-horoscope-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.homepage-horoscope-track::-webkit-scrollbar {
  display: none;
}

.homepage-horoscope-icon {
  transition: transform 0.2s;
}

.homepage-horoscope-icon:hover {
  transform: scale(1.15);
  border-color: #ff9900 !important;
  background-color: #ffe0cc !important;
  box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3);
}

.p-home-horoscope .homepage-horoscope-card .c-card__title {
  font-size: 1rem;
  text-align: center;
}

.homepage-explainer-feature-media-shell {
  aspect-ratio: 16 / 9;
}

.p-home-express-explained .homepage-epaper-story.c-card {
  min-block-size: 100%;
}

.p-home-express-explained .homepage-epaper-story .c-card__media {
  border: 0;
  border-radius: var(--ntcms-radius-lg);
}

.p-home-express-explained .homepage-epaper-story-media {
  aspect-ratio: 16 / 9;
}

.homepage-epaper-story-label {
  font-size: 0.7rem;
  font-family: var(--ntcms-font-family-sans);
}

.p-home-express-explained .homepage-epaper-story .c-card__title {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1.2rem;
  line-height: 1.35;
}

.homepage-epaper-story-link {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  line-height: 1.4;
}

.homepage-epaper-panel.c-card {
  padding: var(--ntcms-space-4);
  gap: var(--ntcms-space-4);
}

.homepage-epaper-cover.c-card__media {
  border-radius: var(--ntcms-radius-lg);
  overflow: hidden;
}

.homepage-epaper-cover-image {
  object-position: top;
}

.p-home-multi-category .homepage-multi-column {
  display: flex;
  flex-direction: column;
  gap: var(--ntcms-space-4);
}

.p-home-multi-category .homepage-multi-column--divided {
  border-right: 1px dotted #ccc;
}

.p-home-multi-category .homepage-multi-feature.c-card {
  min-block-size: auto;
}

.p-home-multi-category .homepage-multi-feature-media.c-card__media {
  border: 0;
  border-radius: var(--ntcms-radius-lg);
}

.p-home-multi-category .homepage-multi-feature-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.p-home-multi-category .homepage-multi-feature-title {
  line-height: 1.3;
}

.p-home-multi-category .homepage-multi-feature-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.p-home-multi-category .homepage-multi-list {
  gap: var(--ntcms-space-3);
}

.p-home-multi-category .homepage-multi-list-item.c-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.p-home-hero-slider #heroSlider {
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

.p-home-hero-slider .homepage-hero-slider-caption.c-card {
  max-inline-size: min(38rem, calc(100% - 2rem));
  margin-inline: auto auto;
  padding: var(--ntcms-space-5);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ntcms-color-surface-default) 4%, transparent) 0%, rgba(15, 23, 42, 0.78) 100%);
  border: 0;
  box-shadow: none;
}

.p-home-hero-slider .homepage-hero-slider-caption .c-card__title,
.p-home-hero-slider .homepage-hero-slider-caption .c-card__eyebrow,
.p-home-hero-slider .homepage-hero-slider-caption .c-card__excerpt {
  color: var(--ntcms-color-text-inverse);
}

.p-home-hero-slider .homepage-hero-slider-side-card.c-card {
  padding: 0 0 var(--ntcms-space-3);
  border: 0;
  border-bottom: 1px dotted rgba(17, 24, 39, 0.18);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.p-home-photo-stories .homepage-photo-hero-card.c-card,
.p-home-photo-stories .homepage-photo-side-card.c-card {
  min-block-size: 100%;
}

.p-home-photo-stories .bg-gradient-overlay {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.68) 48%, rgba(15, 23, 42, 0.92) 100%);
}

.p-home-photo-stories .text-shadow-sm {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.p-home-photo-stories .photo-badge {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.p-home-photo-stories .homepage-photo-badge {
  font-size: 0.7rem;
}

.p-home-photo-stories .homepage-photo-summary {
  max-inline-size: 90%;
}

.homepage-topic-card.c-card {
  gap: 0;
  padding: 0;
  border-radius: 1.25rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06);
}

.homepage-topic-card .c-card__media {
  border: 0;
  border-radius: 0;
}

.homepage-topic-hubs-title {
  font-family: var(--ntcms-font-family-sans);
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

.homepage-topic-card-media {
  aspect-ratio: 16 / 9;
}

.homepage-topic-card .c-card__body {
  padding: var(--ntcms-space-4);
}

.homepage-topic-card-title {
  font-family: var(--font-heading, var(--ntcms-font-family-serif));
  font-size: 1.08rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.homepage-topic-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.homepage-topic-card-featured-col .homepage-topic-card.c-card {
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

.homepage-topic-card-featured-col .homepage-topic-card .c-card__title {
  font-size: 1.2rem;
}

.homepage-photo-hero-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.homepage-photo-hero-title {
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.homepage-photo-summary {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.homepage-photo-side-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.homepage-photo-side-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.homepage-short-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 991.98px) {
  .homepage-lead-story__dek {
    font-size: 0.95rem;
  }

  .homepage-center-rail-label {
    margin-top: 0.5rem;
  }

  .p-home-multimedia .multimedia-desk-card.c-card {
    flex-direction: column;
  }

  .p-home-multimedia .multimedia-desk-thumb.c-card__media {
    inline-size: 100%;
    min-inline-size: 100%;
  }

  .shorts-phone-container {
    max-height: 500px;
  }

  .homepage-visual-shorts-section .shorts-phone-container {
    min-block-size: 420px;
    max-block-size: 500px;
  }

  .homepage-sidebar-rail {
    border-left: 0;
    padding-left: 0;
    margin-top: 1rem;
  }

  .homepage-hero-column-divider {
    border-right: 0;
  }

  .homepage-opinion-rail--divided {
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .homepage-hero-section,
  .homepage-hero-cluster--secondary {
    padding-top: 1rem !important;
    padding-bottom: 1.6rem !important;
  }

  .homepage-hero-image {
    border-radius: 18px;
  }

  .homepage-lead-story {
    gap: 0.9rem;
  }

  .homepage-lead-story__meta-row {
    gap: 0.5rem;
  }

  .homepage-lead-story__dek {
    font-size: 0.92rem;
    line-height: 1.55;
  }

  .homepage-sublead-media-wrap {
    inline-size: 7rem;
  }

  .homepage-sublead-story__dek {
    font-size: 0.84rem;
  }

  .homepage-sidebar-rail {
    border-left: 0;
    padding-left: 0;
  }

  .homepage-visual-story-item:nth-child(n + 5) {
    display: none;
  }

  .p-home-horoscope .homepage-horoscope-card.c-card {
    min-inline-size: 6.5rem;
  }

  .p-home-multi-category .homepage-multi-column {
    border-right: 0 !important;
  }

  .homepage-visual-nav--prev,
  .homepage-visual-nav--next {
    inline-size: 30px;
  }
}

@media (max-width: 576px) {
  .homepage-center-rail-label,
  .homepage-sidebar-kicker {
    font-size: 0.64rem;
  }

  .homepage-main {
    background: #ffffff;
  }

  .homepage-main > section + section,
  .homepage-main > .container + section,
  .homepage-main > section + .container {
    margin-top: 0;
  }

  .homepage-section-block {
    padding-block: 2rem !important;
  }

  .homepage-surface-neutral,
  .homepage-surface-warm,
  .homepage-surface-editorial,
  .homepage-surface-visual,
  .homepage-surface-ink {
    border-radius: 14px;
  }

  .homepage-surface-neutral::after,
  .homepage-surface-warm::after,
  .homepage-surface-editorial::after,
  .homepage-surface-visual::after,
  .homepage-surface-ink::after {
    border-radius: 14px;
  }

  .homepage-section-header {
    margin-bottom: 1rem !important;
    align-items: flex-end !important;
  }

  .homepage-section-title {
    font-size: 0.78rem;
    letter-spacing: 0.11em;
  }

  .homepage-section-link {
    font-size: 0.68rem !important;
    white-space: nowrap;
  }

  .homepage-trending-scroll {
    min-block-size: 42px;
  }

  .homepage-trending-bar {
    gap: 0.75rem;
  }

  .homepage-trending-item {
    font-size: 0.88rem;
  }

  .editorial-title {
    font-size: 1.7rem;
  }

  .aj-trending-wrapper .trending-arrow {
    width: 30px;
  }
}

@media (min-width: 577px) and (max-width: 991.98px) {
  .homepage-section-block {
    padding-block: 2.2rem !important;
  }
}

.homepage-density-compact .homepage-section-block {
  padding-block: 1.75rem !important;
}

.homepage-density-compact .homepage-section-header {
  margin-bottom: 0.85rem !important;
}

/* =====================================================================
   THE FRONT PAGE'S TOP, SET LIKE A NEWSPAPER'S
   =====================================================================
   What was here read as three columns of app cards: the lead sat in a bordered
   white box with a drop shadow, its headline (1.74rem at most) no larger than a
   section heading, and a forced three-line well under it that left a hole when
   the headline ran to two. Nothing told the eye what the day's story was.
   Al Jazeera, the BBC, the NYT and CNN all do the same three things on the
   front, and none of them is decoration:
     1. ONE story is unmistakably the lead — its headline is two to three times
        the size of everything around it.
     2. Nothing is boxed. Columns are separated by hairlines, the way a page is
        ruled; a shadowed card says "widget", not "newspaper".
     3. One typographic scale, top to bottom: lead, second lead, secondary,
        rail. Every step is visibly smaller than the one above it.
   Appended last on purpose — this is the settled version of rules written
   further up, and the order is what makes it win.
   ===================================================================== */

.nr-hero {
    grid-template-columns: minmax(0, 1.78fr) minmax(230px, 0.76fr) minmax(240px, 0.6fr);
    gap: clamp(20px, 1.9vw, 30px);
    padding-block: 26px 32px;
}

/* The page is ruled, not boxed. */
.nr-hero__secondary,
.nr-hero .nr-latest {
    border-inline-start: 1px solid var(--nr-rule, #d9dde3);
    padding-inline-start: clamp(18px, 1.7vw, 28px);
}

/* --- the lead ------------------------------------------------------- */

.nr-card--lead {
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
}

.nr-card--lead .nr-card__body {
    background: none;
    padding: 14px 0 0;
    min-height: 0;
    display: block;
}

.nr-card--lead .nr-card__title {
    /* The one measure that decides whether a front page has a lead at all. */
    font-size: clamp(1.85rem, 2.85vw, 2.75rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.022em;
    /* The old rule held three lines of space open whatever the headline did,
       which is where the gap under a two-line lead came from. */
    min-block-size: 0;
    margin: 0;
}

.nr-card--lead .nr-card__deck {
    margin: 10px 0 0;
    font-size: clamp(1rem, 1.06vw, 1.14rem);
    line-height: 1.5;
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The section label is a kicker, not a grey pill. */
.nr-card--lead .nr-meta__section {
    min-height: 0;
    padding: 0;
    background: none;
    color: var(--nr-accent, #c8102e);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.nr-card--lead .nr-meta {
    gap: 10px;
    font-size: 0.78rem;
    color: #6b7280;
}

/* --- second lead, under the picture --------------------------------- */

.nr-second-lead {
    margin-top: 20px;
    padding-top: 18px;
}

.nr-card--lead-secondary .nr-card__title {
    font-size: clamp(1.12rem, 1.36vw, 1.4rem);
    line-height: 1.16;
    font-weight: 800;
}

/* --- the secondary column ------------------------------------------- */

.nr-hero__secondary {
    gap: 0;
}

.nr-card.nr-card--secondary {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 12px;
    padding-block: 14px;
    border-bottom: 1px solid var(--nr-rule, #d9dde3);
}

.nr-hero__secondary > .nr-card--secondary:first-child {
    padding-top: 0;
}

.nr-hero__secondary > .nr-card--secondary:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nr-card--secondary .nr-card__title {
    font-size: clamp(0.99rem, 1.06vw, 1.08rem);
    line-height: 1.24;
    font-weight: 700;
}

/* --- the latest rail ------------------------------------------------- */

.nr-latest__heading {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--nr-ink, #111317);
    font-family: var(--nr-sans);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* A ruled list, not a bulleted one: the red discs read as a to-do list, and
   they gave the least important column the loudest mark on the page. */
.nr-latest__list li {
    padding: 12px 0;
}

.nr-latest__list li::before {
    display: none;
}

.nr-latest__list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.nr-latest__list a {
    font-size: 0.97rem;
    font-weight: 700;
    line-height: 1.26;
}

.nr-latest .nr-meta {
    margin-top: 5px;
    font-size: 0.72rem;
    color: #6b7280;
}

.nr-latest .nr-meta__section {
    color: var(--nr-accent, #c8102e);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* --- narrow screens --------------------------------------------------- */

@media (max-width: 1099px) {
    .nr-hero {
        grid-template-columns: minmax(0, 1.5fr) minmax(230px, 0.85fr);
    }
    .nr-hero .nr-latest {
        border-inline-start: 0;
        padding-inline-start: 0;
    }
}

@media (max-width: 767px) {
    .nr-hero {
        /* The stack the sheet already had further up: my rules above are later in the file, so
           without repeating it here a 390px phone kept two columns and the lead was squeezed into
           250px. Caught by rendering, not by reading. */
        grid-template-columns: minmax(0, 1fr);
    }

    .nr-hero__secondary,
    .nr-hero .nr-latest {
        border-inline-start: 0;
        padding-inline-start: 0;
    }
    .nr-card--lead .nr-card__title {
        font-size: clamp(1.5rem, 6.4vw, 2rem);
    }
    .nr-card.nr-card--secondary {
        grid-template-columns: 92px minmax(0, 1fr);
    }
}

/* --- the compact meta: a whisper under the headline, never a shout over it --- */

.nr-meta--compact {
    margin: 6px 0 0;
    gap: 8px;
    font-size: 0.7rem;
    color: #6b7280;
}

.nr-meta--compact .nr-meta__section {
    color: var(--nr-accent, #c8102e);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.nr-meta--compact time {
    color: #9aa1ab;
    font-weight: 600;
}

/* A headline that ends "मुरलीधर सो…" is not a headline. Two clamped lines cut most Hindi heads
   mid-word; three carry them whole, and the ruled rows absorb the height difference. */
.nr-card--secondary .nr-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =====================================================================
   THE FRONT PAGE, 22 AUGUST 2026 — what the desk knows, laid out like a page.
   Appended last on purpose: these are the settled rules and the order is
   what makes them win.

   Three things this page does that no national front does, and each one
   comes from something only this newsroom has:
     1. A NUMBER STRIP. A reader with one minute leaves a front page with
        nothing. Five figures, each a door into its own story.
     2. THREE COLUMNS ON ONE RULE, each with a different rhythm. Eight
        identical thumbnail rows read as a feed; picture-over, picture-beside,
        then ruled headlines reads as a page.
     3. TOMORROW'S PAGE. Every story on every front page is in the past
        tense. This desk knows at nine at night what page one carries at
        03:40, because the page is being made upstairs.
   ===================================================================== */

/* --- 2. one rule across all three columns ----------------------------- */

.nr-colhead,
.nr-card--lead > .nr-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 13px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--nr-ink, #111317);
}

.nr-colhead__title {
    margin: 0;
    font-family: var(--nr-sans);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nr-colhead__note,
.nr-card--lead > .nr-meta time,
.nr-card--lead > .nr-meta .nr-meta__byline {
    margin-inline-start: auto;
    font-size: 0.73rem;
    font-weight: 600;
    color: #6b7280;
    text-align: end;
}

/* The rail's old free-standing heading is gone from the markup; this keeps any
   cached page that still carries it on the same rule as the other two. */
.nr-latest__heading {
    margin: 0 0 13px;
    padding-bottom: 8px;
}

/* --- the lead --------------------------------------------------------- */

/* The kicker and the clock now OPEN the column, above the picture. Under it they
   read as a caption for the photograph rather than a label for the story, and the
   headline came away from its own kicker by the whole height of the picture. */
.nr-card--lead > .nr-meta .nr-meta__section {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
}

.nr-card__figure {
    position: relative;
    margin: 0;
}

/* A printed page puts the caption ON the picture. A line of grey type between the
   picture and the headline is a line of white that unbinds them. */
.nr-card__caption {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    padding: 26px 14px 11px;
    font-size: 0.73rem;
    line-height: 1.34;
    color: #fff;
    background: linear-gradient(to top, rgba(9, 11, 15, 0.85), rgba(9, 11, 15, 0.55) 45%, rgba(9, 11, 15, 0));
    pointer-events: none;
}

.nr-card--lead .nr-card__body {
    padding: 13px 0 0;
}

/* --- the second column, three rhythms --------------------------------- */

.nr-hero__secondary > .nr-card--secondary-lead {
    display: block;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--nr-rule, #d9dde3);
}

.nr-card--secondary-lead .nr-card__media {
    display: block;
}

.nr-card--secondary-lead .nr-card__media-image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.nr-card--secondary-lead .nr-card__body {
    padding: 11px 0 0;
}

.nr-card--secondary-lead .nr-card__title {
    font-size: clamp(1.14rem, 1.42vw, 1.38rem);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.012em;
}

.nr-hero__secondary > .nr-card--secondary {
    padding-top: 15px;
}

.nr-hero__secondary > .nr-card--secondary-text {
    display: block;
    padding-block: 13px;
    border-bottom: 1px solid var(--nr-rule, #d9dde3);
}

.nr-card--secondary-text .nr-card__body {
    padding: 0;
}

.nr-card--secondary-text .nr-card__title {
    font-size: 0.98rem;
    line-height: 1.26;
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.nr-hero__secondary > .nr-card:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* --- when the lead is live, the updates ARE the story ------------------ */

.nr-hero__lead .nr-live-updates {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--nr-rule, #d9dde3);
}

/* --- 3. कल के पन्ने पर -------------------------------------------------- */

.nr-tomorrow {
    padding-block: 4px 30px;
}

.nr-tomorrow__head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 13px;
    border-top: 2px solid var(--nr-ink, #111317);
}

.nr-tomorrow__title {
    margin: 0;
    font-family: var(--nr-sans);
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.nr-tomorrow__note {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: #6b7280;
}

.nr-tomorrow__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.nr-tomorrow__item {
    padding-inline: 20px;
    border-inline-start: 1px solid var(--nr-rule, #d9dde3);
}

.nr-tomorrow__item::before {
    display: none;
}

.nr-tomorrow__item:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
}

.nr-tomorrow__item:last-child {
    padding-inline-end: 0;
}

.nr-tomorrow__page {
    display: block;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nr-accent, #b20d18);
}

.nr-tomorrow__headline {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 6px;
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.27;
}

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 1099px) {



}

@media (max-width: 767px) {

    .nr-tomorrow__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 15px;
    }

    .nr-tomorrow__item:nth-child(odd) {
        padding-inline-start: 0;
        border-inline-start: 0;
    }
}

@media (max-width: 575px) {

    .nr-tomorrow__list {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    .nr-tomorrow__item {
        padding: 12px 0;
        border-inline-start: 0;
        border-top: 1px solid var(--nr-rule, #d9dde3);
    }

    .nr-tomorrow__item:first-child {
        border-top: 0;
    }
}

/* =====================================================================
   AFTER LOOKING AT IT, 22 AUGUST — three things the render showed that
   reading the stylesheet could not.
   ===================================================================== */

/* 1. LETTER-SPACING BREAKS DEVANAGARI. The label rules inherited the Latin
      small-caps habit of 0.08–0.12em tracking; on "पन्ना" and "कल के पन्ने पर"
      that tracking pulls the न्न conjunct apart and the word stops being one
      word. Tracking survives only where the text is digits or Latin. */
.nr-colhead__title,
.nr-tomorrow__title,
.nr-tomorrow__page,
.nr-card--lead > .nr-meta .nr-meta__section,
.nr-colhead__note,
.nr-tomorrow__note {
    letter-spacing: 0;
    text-transform: none;
}

.nr-colhead__title,
.nr-tomorrow__title {
    font-size: 0.88rem;
}

.nr-tomorrow__page {
    font-size: 0.7rem;
}

/* 2. THE MIDDLE COLUMN WAS TOO NARROW TO HOLD A HEADLINE BESIDE A PICTURE.
      At 0.76fr the picture-left card left 144px for the headline and every
      one of them broke into four ragged lines. The rail gives up the width;
      it carries single-line headlines and does not need it. */
.nr-hero {
    grid-template-columns: minmax(0, 1.62fr) minmax(268px, 0.9fr) minmax(212px, 0.58fr);
}

.nr-hero__secondary .nr-card.nr-card--secondary {
    grid-template-columns: 116px minmax(0, 1fr);
}

/* 3. THE LEAD COLUMN ENDED A QUARTER OF A PAGE ABOVE THE OTHER TWO.
      White under the lead is not restraint, it is a hole. The lead earns the
      height back where a newspaper earns it: a taller photograph and a deck
      that is allowed to run. */
.nr-card--lead .nr-card__figure .nr-card__media-image,
.nr-card--lead > .nr-card__media .nr-card__media-image {
    display: block;
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.nr-card--lead .nr-card__deck {
    -webkit-line-clamp: 5;
    font-size: clamp(1.02rem, 1.1vw, 1.18rem);
    line-height: 1.55;
}

@media (max-width: 1099px) {
    .nr-hero {
        grid-template-columns: minmax(0, 1.5fr) minmax(268px, 0.9fr);
    }
}

@media (max-width: 767px) {
    .nr-hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .nr-hero__secondary .nr-card.nr-card--secondary {
        grid-template-columns: 104px minmax(0, 1fr);
    }
}

/* --- आगे क्या ---------------------------------------------------------
   The only line on the front page that faces forward. A red spine, because it
   is the one thing on the page the reader is meant to act on; everything else
   here is reading. It is deliberately NOT a card — a boxed promise reads as an
   advertisement, and this is the paper speaking.
   ------------------------------------------------------------------- */

.nr-next {
    margin-top: 16px;
    padding: 2px 0 2px 14px;
    border-inline-start: 3px solid var(--nr-accent, #b20d18);
}

.nr-next__label {
    display: block;
    font-family: var(--nr-sans);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0;
    color: var(--nr-accent, #b20d18);
}

.nr-next__body {
    margin: 3px 0 0;
    font-size: 1.02rem;
    line-height: 1.4;
    color: var(--nr-ink, #111317);
}

.nr-next__body strong {
    font-weight: 800;
}

.nr-next__link {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--nr-accent, #b20d18);
    text-decoration: none;
}

.nr-next__link:hover {
    text-decoration: underline;
}

@media (max-width: 575px) {
    .nr-next__body {
        font-size: 0.97rem;
    }
}

/* The reminder button under the promise. It is not a call to action shouting for a tap; it is the
   paper offering to remember for you, so it reads as a quiet second option beside the link. */
.nr-next__actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 5px;
}

.nr-next__link {
    margin-top: 0;
}

.nr-next__remind {
    appearance: none;
    padding: 4px 11px;
    border: 1px solid var(--nr-rule, #d9dde3);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 0.79rem;
    font-weight: 700;
    color: var(--nr-ink, #111317);
    cursor: pointer;
}

.nr-next__remind:hover {
    border-color: var(--nr-ink, #111317);
}

/* Hidden until the script confirms this browser can actually deliver a notification. */
.nr-next__remind--unavailable {
    display: none;
}

.nr-next__remind--done {
    border-color: transparent;
    background: none;
    padding-inline: 0;
    color: #6b7280;
    cursor: default;
}

/* =====================================================================
   THE FRONT PAGE IS SET IN NOTO SANS DEVANAGARI, AND ITS MATRAS FIT.
   Two faults measured on the live page, 22 August, neither visible from
   the stylesheet alone.
   ===================================================================== */

/* 1. THE HEADLINES WERE NEVER NOTO SANS DEVANAGARI.
      `--nr-sans` falls back to `--ntcms-home-stable-sans`, and that stack is
      "Nirmala UI", "Mangal", "Segoe UI" — Noto is not in it anywhere. Every
      headline on the front has been rendering in the Windows system face.

      The variable is redefined HERE rather than at :root, and only on the
      front page's own container: `body.reader-script-home-stable *` sets the
      family on every descendant, so overriding the family on a card would lose
      to it on specificity — but a custom property is resolved AT the element,
      so re-declaring it on an ancestor beats that rule from inside. The header
      and the footer sit outside .nr-homepage and keep the face they had. */
.nr-homepage,
.nr-shell {
    --ntcms-home-stable-sans: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif;
    --nr-sans: "Noto Sans Devanagari", "Nirmala UI", "Mangal", "Segoe UI", system-ui, sans-serif;
}

/* 2. THE MATRAS WERE BEING CUT OFF.
      The lead ran at line-height 1.08 inside a -webkit-box with overflow
      hidden. Latin survives 1.08; Devanagari does not — ि ी े ै ो sit ABOVE the
      shirorekha and ु ू ृ hang below, so a line box that tight crops the top of
      every line. 1.26 is what clears both without opening the head up. */
.nr-card--lead .nr-card__title {
    font-family: var(--nr-sans);
    line-height: 1.26;
}

.nr-card--secondary-lead .nr-card__title,
.nr-card--secondary .nr-card__title,
.nr-card--secondary-text .nr-card__title,
.nr-latest__list a,
.nr-tomorrow__headline {
    line-height: 1.3;
}

.nr-card__title {
    font-family: var(--nr-sans);
}