:root {
    --container: 1360px;
    /* Every redesign token follows Branding > Colors; fallbacks keep the CSS standalone. */
    --redesign-ink: var(--brand-ink, var(--brand-navy, #132238));
    --redesign-muted: var(--brand-muted, #66758a);
    --redesign-paper: var(--brand-canvas, #f4f7fb);
    --redesign-surface: var(--brand-surface, #ffffff);
    --redesign-accent: var(--brand-primary, #e85d3f);
    --redesign-accent-dark: var(--brand-primary-hover, var(--brand-primary, #bd3f2b));
    --redesign-secondary: var(--brand-secondary, #1595ff);
    --redesign-line: var(--brand-border, #d9e2ec);
    --redesign-accent-soft: color-mix(in srgb, var(--redesign-accent) 12%, var(--redesign-surface));
    --redesign-dark-soft: color-mix(in srgb, var(--redesign-ink) 90%, var(--redesign-surface));
}

html.public-site { background: var(--redesign-paper); }
html.public-site body {
    color: var(--redesign-ink);
    background: var(--redesign-paper);
    font-family: var(--font-family-base);
}

.public-site .site-header { position: relative; z-index: 5; background: var(--redesign-surface); box-shadow: 0 8px 30px color-mix(in srgb, var(--redesign-ink) 7%, transparent); }
.public-site .utility-bar { color: var(--brand-on-dark-muted, var(--redesign-surface)); background: var(--redesign-ink); }
.public-site .utility-inner { min-height: 38px; }
.public-site .masthead { min-height: 124px; grid-template-columns: auto 1fr minmax(260px, 390px); gap: 34px; }
.public-site .brand-mark { display: inline-grid; place-items: center; width: 190px; height: 72px; padding: 10px 16px; background: var(--redesign-paper); border-radius: 18px; }
.public-site .brand img { max-width: 170px; max-height: 56px; }
.public-site .masthead-message { align-self: center; padding-inline-start: 28px; border-inline-start: 4px solid var(--redesign-accent); }
.public-site .masthead-message strong { display: block; color: var(--redesign-ink); font-size: 1.25rem; }
.public-site .masthead-message span { color: var(--redesign-muted); font-size: .82rem; }
.public-site .header-search { min-height: 52px; border: 1px solid var(--redesign-line); border-radius: 14px; background: var(--redesign-paper); overflow: hidden; }
.public-site .header-search:focus-within { border-color: var(--redesign-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--redesign-accent) 12%, transparent); }
.public-site .header-search button { background: var(--redesign-accent); }
.public-site .main-nav { color: var(--brand-on-dark, var(--redesign-surface)); background: var(--redesign-ink); border: 0; }
.public-site .nav-inner { justify-content: flex-start; gap: 4px; }
.public-site .main-nav:not(.menu-template-pills):not(.menu-template-tabs) .nav-inner a,
.public-site .main-nav:not(.menu-template-pills):not(.menu-template-tabs) .nav-item > a { min-height: 54px; color: var(--brand-on-dark, var(--redesign-surface)); border-radius: 10px 10px 0 0; }
.public-site .main-nav:not(.menu-template-pills):not(.menu-template-tabs) .nav-inner a:hover,
.public-site .main-nav:not(.menu-template-pills):not(.menu-template-tabs) .nav-inner a.active,
.public-site .main-nav:not(.menu-template-pills):not(.menu-template-tabs) .nav-item > a:hover,
.public-site .main-nav:not(.menu-template-pills):not(.menu-template-tabs) .nav-item > a.active { color: var(--brand-on-dark, var(--redesign-surface)); background: var(--redesign-accent); }

.public-site .breaking-bar { margin-block: 22px 0; color: var(--redesign-ink); background: var(--redesign-accent-soft); border: 1px solid color-mix(in srgb, var(--redesign-accent) 26%, var(--redesign-surface)); border-radius: 16px; }
.public-site .breaking-inner > strong { background: var(--redesign-accent); border-radius: 0 14px 14px 0; }
.public-site .home-content { padding-block: 26px 90px; }
.public-site .hero-grid { grid-template-columns: minmax(0, 1.8fr) minmax(330px, .9fr); gap: 28px; }
.public-site .main-news-card { min-height: 570px; border-radius: 26px; box-shadow: 18px 18px 0 color-mix(in srgb, var(--redesign-accent) 12%, transparent); }
.public-site .main-news-image::after { background: linear-gradient(0deg, color-mix(in srgb, var(--redesign-ink) 92%, transparent), color-mix(in srgb, var(--redesign-ink) 5%, transparent) 75%); }
.public-site .main-news-copy { min-height: 570px; padding: clamp(28px, 5vw, 60px); }
.public-site .main-news-copy h1 { font-size: clamp(2.2rem, 4vw, 4.5rem); }
.public-site .main-news-copy .category-label { background: var(--redesign-accent); border-radius: 999px; }
.public-site .secondary-news { gap: 20px; padding: 20px; background: color-mix(in srgb, var(--redesign-surface) 72%, transparent); border: 1px solid var(--redesign-line); border-radius: 24px; }
.public-site .news-card-image { border-radius: 16px; }
.public-site .news-card h3 { color: var(--redesign-ink); }
.public-site .news-card h3 a:hover { color: var(--redesign-accent-dark); }
.public-site .section-heading { min-height: 62px; margin-bottom: 26px; border-bottom: 2px solid var(--redesign-line); }
.public-site .section-heading h2 { font-size: 1.8rem; }
.public-site .section-heading h2::after { height: 4px; background: var(--redesign-accent); }
.public-site .content-columns { display: block; }
.public-site .latest-news { position: relative; padding: clamp(22px, 3vw, 38px); background: color-mix(in srgb, var(--redesign-surface) 82%, transparent); border: 1px solid var(--redesign-line); border-radius: 28px; }
.public-site .latest-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.public-site .news-card-horizontal { display: block; padding: 0 0 22px; border-bottom: 1px solid var(--redesign-line); }
.public-site .news-card-horizontal .news-card-image { border-radius: 18px; }
.public-site .news-card-horizontal .news-card-body { padding-top: 14px; }
.public-site .latest-list .news-card { padding: 12px; background: var(--redesign-surface); border: 1px solid var(--redesign-line); border-radius: 20px; box-shadow: 0 10px 22px color-mix(in srgb, var(--redesign-ink) 7%, transparent); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.public-site .latest-list .news-card:hover, .public-site .latest-list .news-card:focus-within { transform: translateY(-7px); border-color: var(--redesign-accent); box-shadow: 0 18px 30px color-mix(in srgb, var(--redesign-accent) 18%, transparent); }
.public-site .news-card-image { position: relative; isolation: isolate; }
.public-site .news-card-image::after { content: "اقرأ الخبر"; position: absolute; inset-inline-end: 10px; inset-block-end: 10px; z-index: 1; padding: 5px 10px; color: var(--brand-on-dark, var(--redesign-surface)); background: color-mix(in srgb, var(--redesign-ink) 86%, transparent); border-radius: 999px; font-size: .68rem; font-weight: 800; opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.public-site .news-card:hover .news-card-image::after, .public-site .news-card:focus-within .news-card-image::after { opacity: 1; transform: translateY(0); }
.public-site .news-card .category-label { display: inline-flex; padding: 3px 9px; color: var(--redesign-accent-dark); background: var(--redesign-accent-soft); border-radius: 999px; font-size: .7rem; }
.public-site .category-section { padding: 28px; background: color-mix(in srgb, var(--redesign-surface) 78%, transparent); border: 1px solid var(--redesign-line); border-radius: 24px; }
.public-site .category-section + .category-section { margin-top: 34px; }
.public-site .category-section:nth-of-type(even) { background: color-mix(in srgb, var(--redesign-accent-soft) 62%, var(--redesign-surface)); border-inline-start: 6px solid var(--redesign-secondary); }
.public-site .category-section:nth-of-type(odd) { border-inline-start: 6px solid var(--redesign-accent); }
.public-site .category-section-heading { border-bottom-color: var(--redesign-accent); }
.public-site .category-news-grid { gap: 24px; }
.public-site .category-small-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 18px; background: color-mix(in srgb, var(--redesign-paper) 76%, transparent); border-radius: 20px; }
.public-site .category-small-grid .news-card { padding-bottom: 12px; border-bottom: 1px solid var(--redesign-line); }
.public-site .editorial-section { position: relative; margin-block: 42px; padding: clamp(20px, 3vw, 34px); background: color-mix(in srgb, var(--redesign-surface) 86%, transparent); border: 1px solid var(--redesign-line); border-radius: 30px; overflow: hidden; }
.public-site .editorial-section::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 5px; background: linear-gradient(90deg, var(--redesign-accent), var(--redesign-secondary)); }
.public-site .editorial-heading { position: relative; z-index: 1; margin-bottom: 26px; padding-bottom: 16px; border-bottom: 1px solid var(--redesign-line); }
.public-site .editorial-heading h2 { font-size: clamp(1.35rem, 2.4vw, 2.15rem); }
.public-site .editorial-heading > a { padding: 8px 14px; color: var(--redesign-accent-dark); background: var(--redesign-accent-soft); border-radius: 999px; transition: background .2s ease, color .2s ease; }
.public-site .editorial-heading > a:hover, .public-site .editorial-heading > a:focus-visible { color: var(--brand-on-dark, var(--redesign-surface)); background: var(--redesign-accent); }
.public-site .editorial-section .t-story { padding: 12px; background: var(--redesign-surface); border: 1px solid var(--redesign-line); border-radius: 20px; box-shadow: 0 9px 22px color-mix(in srgb, var(--redesign-ink) 7%, transparent); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease; }
.public-site .editorial-section .t-story:hover, .public-site .editorial-section .t-story:focus-within { transform: translateY(-6px); border-color: var(--redesign-secondary); box-shadow: 0 18px 28px color-mix(in srgb, var(--redesign-secondary) 16%, transparent); }
.public-site .editorial-section .t-story-media { border-radius: 14px; }
.public-site .editorial-section .t-story-media::after { content: "فتح التفاصيل"; position: absolute; inset-inline-end: 10px; inset-block-end: 10px; padding: 5px 10px; color: var(--brand-on-dark, var(--redesign-surface)); background: color-mix(in srgb, var(--redesign-ink) 85%, transparent); border-radius: 999px; font-size: .66rem; font-weight: 800; opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease; }
.public-site .editorial-section .t-story:hover .t-story-media::after, .public-site .editorial-section .t-story:focus-within .t-story-media::after { opacity: 1; transform: translateY(0); }
.public-site .editorial-section .t-story-copy { padding: 14px 4px 4px; }
.public-site .editorial-section .t-story-date { color: var(--redesign-muted); }
.public-site .t-frontpage-archive,
.public-site .t-visual-feed,
.public-site .t-visual-story-grid { position: relative; }
.public-site .t-frontpage-archive { margin-block: 38px; padding: clamp(22px, 4vw, 44px); background: color-mix(in srgb, var(--redesign-surface) 86%, transparent); border: 1px solid var(--redesign-line); border-radius: 28px; box-shadow: 0 18px 42px color-mix(in srgb, var(--redesign-ink) 7%, transparent); }
.public-site .t-frontpage-rule { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }
.public-site .t-frontpage-rule::before { width: 52px; height: 5px; content: ""; background: var(--redesign-accent); border-radius: 99px; }
.public-site .t-frontpage-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.public-site .t-frontpage-columns .t-story { padding: 14px; background: var(--redesign-paper); border: 1px solid var(--redesign-line); border-radius: 18px; }
.public-site .t-visual-feed { margin-block: 46px; padding: clamp(22px, 4vw, 44px); background: color-mix(in srgb, var(--redesign-surface) 86%, transparent); border: 1px solid var(--redesign-line); border-radius: 28px; }
.public-site .t-visual-feed::before { display: block; width: 52px; height: 5px; margin-bottom: 18px; content: ""; background: var(--redesign-accent); border-radius: 99px; }
.public-site .t-visual-feed .t-visual-heading { margin: 0 0 26px; padding: 0 0 16px; text-align: start; border-bottom: 1px solid var(--redesign-line); }
.public-site .t-visual-feed .t-visual-heading::before { display: none; }
.public-site .t-visual-feed .t-visual-story-grid { gap: 18px; }
.public-site .t-visual-feed .t-story { padding: 14px; text-align: start; background: var(--redesign-paper); border: 1px solid var(--redesign-line); border-radius: 18px; }
.public-site .ad-slot { border-radius: 18px; background: color-mix(in srgb, var(--redesign-surface) 60%, transparent); border-color: var(--redesign-line); }
.public-site .site-footer { margin-top: 40px; color: var(--brand-on-dark-muted, var(--redesign-surface)); background: var(--redesign-ink); border: 0; }
.public-site .footer-tags { border-color: color-mix(in srgb, var(--redesign-surface) 16%, transparent); }
.public-site .footer-tags a { border-color: color-mix(in srgb, var(--redesign-surface) 22%, transparent); border-radius: 999px; }

.public-site .site-footer { position: relative; padding-top: 12px; }
.public-site .site-footer::before { position: absolute; inset: 0 0 auto; height: 7px; content: ""; background: linear-gradient(90deg, var(--redesign-accent), var(--redesign-secondary)); }
.public-site .footer-tags { min-height: 54px; padding-block: 12px; gap: 10px; }
.public-site .footer-tags strong { margin-inline-end: 10px; font-size: .95rem; }
.public-site .footer-bar { min-height: 0; display: grid; grid-template-columns: minmax(190px, .8fr) minmax(240px, 1.15fr) minmax(220px, 1fr); align-items: start; gap: 28px; padding-block: 26px 18px; border-top: 1px solid color-mix(in srgb, var(--redesign-surface) 16%, transparent); }
.public-site .footer-logo { align-self: start; }
.public-site .footer-logo .brand-mark { background: var(--redesign-surface); }
.public-site .footer-copy { max-width: 48ch; color: var(--brand-on-dark-muted, var(--redesign-surface)); font-size: .9rem; line-height: 1.9; }
.public-site .footer-nav { display: grid; grid-template-columns: repeat(2, minmax(90px, 1fr)); gap: 12px 20px; }
.public-site .footer-nav a { padding-bottom: 9px; color: var(--brand-on-dark, var(--redesign-surface)); border-bottom: 1px solid color-mix(in srgb, var(--redesign-surface) 16%, transparent); }
.public-site .footer-nav a:hover { color: var(--redesign-secondary); border-color: var(--redesign-secondary); }
.public-site .footer-bar small { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 12px; color: var(--brand-on-dark-muted, var(--redesign-surface)); border-top: 1px solid color-mix(in srgb, var(--redesign-surface) 16%, transparent); }

.public-site .top-stories-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(360px, 42vw) 210px; gap: 16px; margin-bottom: 28px; }
.public-site .top-stories-grid .t-story { position: relative; display: grid; min-width: 0; overflow: hidden; background: var(--redesign-ink); }
.public-site .top-stories-grid .t-story:first-child { grid-column: span 2; }
.public-site .top-stories-grid .t-story > * { grid-area: 1 / 1; }
.public-site .top-stories-grid .t-story-media { width: 100%; height: 100%; aspect-ratio: auto; }
.public-site .top-stories-grid .t-story-media::after { position: absolute; inset: 38% 0 0; content: ""; background: linear-gradient(transparent, color-mix(in srgb, var(--redesign-ink) 96%, transparent)); }
.public-site .top-stories-grid .t-story-media img { width: 100%; height: 100%; object-fit: cover; }
.public-site .top-stories-grid .t-story-copy { position: relative; z-index: 1; align-self: end; padding: 20px; }
.public-site .top-stories-grid .t-story-category { position: absolute; inset: auto 16px calc(100% + 14px) auto; padding: 5px 10px; color: var(--brand-on-dark, var(--redesign-surface)); background: var(--redesign-accent); font-size: .72rem; font-weight: 800; }
.public-site .top-stories-grid :is(h1, h2) { margin: 0; color: var(--brand-on-dark, var(--redesign-surface)); font-size: clamp(1rem, 1.55vw, 1.45rem); line-height: 1.55; }
.public-site .top-stories-grid .t-story:first-child :is(h1, h2) { max-width: 28ch; font-size: clamp(1.5rem, 2.5vw, 2.35rem); }
.public-site .top-stories-grid .t-story-date { display: none; }

/* Internal newsroom rhythm: alternating Sky-style editorial bands, rails and clear actions. */
.public-site .category-section:nth-of-type(3n + 1),
.public-site .editorial-section:nth-of-type(3n + 1) { background: var(--redesign-ink); color: var(--brand-on-dark, var(--redesign-surface)); border-color: transparent; }
.public-site .category-section:nth-of-type(3n + 1) .section-heading h2,
.public-site .editorial-section:nth-of-type(3n + 1) .editorial-heading h2,
.public-site .category-section:nth-of-type(3n + 1) .news-card h3,
.public-site .editorial-section:nth-of-type(3n + 1) h3 { color: var(--brand-on-dark, var(--redesign-surface)); }
.public-site .category-section:nth-of-type(3n + 1) .category-small-grid,
.public-site .editorial-section:nth-of-type(3n + 1) .t-story { background: color-mix(in srgb, var(--redesign-ink) 82%, var(--redesign-surface)); border-color: color-mix(in srgb, var(--redesign-surface) 18%, transparent); }
.public-site .category-section:nth-of-type(3n + 1) .section-heading,
.public-site .editorial-section:nth-of-type(3n + 1) .editorial-heading { border-color: color-mix(in srgb, var(--redesign-surface) 22%, transparent); }
.public-site .category-section:nth-of-type(3n + 1) .section-heading > a,
.public-site .editorial-section:nth-of-type(3n + 1) .editorial-heading > a { color: var(--brand-on-dark, var(--redesign-surface)); background: var(--redesign-accent); }
.public-site .category-news-grid { grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); align-items: stretch; }
.public-site .category-small-grid { grid-template-columns: 1fr; align-content: start; }
.public-site .category-small-grid .news-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
.public-site .category-small-grid .news-card-image { grid-row: span 2; }
.public-site .category-small-grid .news-card-body { padding: 0; }
.public-site .editorial-cards { grid-template-columns: repeat(4, minmax(210px, 1fr)); }
.public-site .editorial-cards .t-story { height: 100%; }
.public-site .editorial-tiles { gap: 14px; }
.public-site .editorial-tiles .t-story { padding: 0; overflow: hidden; }
.public-site .editorial-tiles .t-story-copy { padding: 12px; }
.public-site .editorial-tiles .t-story-media { border-radius: 0; }
.public-site .t-frontpage-columns .t-story:first-child { grid-column: span 2; }
.public-site .t-frontpage-columns .t-story:first-child .t-story-media { aspect-ratio: 16 / 7; }

@media (max-width: 900px) {
    .public-site .category-news-grid { grid-template-columns: 1fr; }
    .public-site .editorial-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-site .footer-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .public-site .top-stories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 380px repeat(3, 210px); }
    .public-site .top-stories-grid .t-story:first-child { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
    .public-site .masthead { min-height: 0; }
    .public-site .hero-grid { gap: 24px; }
    .public-site .main-news-card, .public-site .main-news-copy { min-height: 500px; }
}

@media (max-width: 640px) {
    .public-site .masthead { padding-block: 12px; }
    .public-site .brand-mark { width: 160px; height: 60px; }
    .public-site .hero-grid { gap: 20px; }
    .public-site .main-news-card, .public-site .main-news-copy { min-height: 430px; }
    .public-site .main-news-card { border-radius: 20px; box-shadow: 10px 10px 0 color-mix(in srgb, var(--redesign-accent) 12%, transparent); }
    .public-site .secondary-news { padding: 14px; border-radius: 18px; }
    .public-site .category-section { padding: 18px; border-radius: 18px; }
    .public-site .latest-list { grid-template-columns: 1fr; gap: 20px; }
    .public-site .category-small-grid { grid-template-columns: 1fr; padding: 12px; }
    .public-site .t-frontpage-columns { grid-template-columns: 1fr; }
    .public-site .t-frontpage-columns .t-story:first-child { grid-column: auto; }
    .public-site .category-small-grid .news-card { grid-template-columns: 96px minmax(0, 1fr); }
    .public-site .editorial-cards { grid-template-columns: 1fr; }
    .public-site .t-frontpage-archive, .public-site .t-visual-feed { padding: 20px 16px; border-radius: 20px; }
    .public-site .footer-bar { display: flex; min-height: 0; flex-direction: column; gap: 24px; padding-block: 30px; }
    .public-site .footer-nav { width: 100%; }
    .public-site .footer-bar small { width: 100%; }
    .public-site .top-stories-grid { grid-template-columns: 1fr; grid-template-rows: 390px repeat(6, 210px); gap: 12px; }
    .public-site .top-stories-grid .t-story:first-child { grid-column: auto; }
    .public-site .top-stories-grid .t-story-copy { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .public-site *, .public-site *::before, .public-site *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Homepage stadium scene: keep this final so it wins over shared theme presets. */
html.public-site .homepage-upper-zone {
    background-color: #5e9f42;
    background-image: url('/images/koramasr-stadium-bg.webp');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

html.public-site .homepage-upper-zone::before {
    z-index: 0;
    background: rgba(255, 255, 255, .1);
}

html.public-site .homepage-upper-zone > .site-header,
html.public-site .homepage-upper-zone > .homepage-upper-main {
    position: relative;
    z-index: 1;
}

html.public-site .homepage-upper-zone > .site-header { background: transparent; box-shadow: none; }
html.public-site .homepage-upper-zone .utility-bar { background: rgba(7, 15, 25, .82); }
html.public-site .homepage-upper-zone .masthead {
    min-height: 142px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "content brand";
    gap: 28px;
    background: transparent;
}
html.public-site .homepage-upper-zone .masthead .brand { grid-area: brand; }
html.public-site .homepage-upper-zone .masthead-content {
    grid-area: content;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 24px;
    direction: ltr;
}
html.public-site .homepage-upper-zone .homepage-masthead-ad { min-width: 0; flex: 1 1 auto; order: 1; }
html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-slot { min-height: 0; margin: 0; border: 0; background: transparent; }
html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame,
html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame a { width: 100%; }
html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame img { width: 100%; max-height: 138px; object-fit: contain; }
html.public-site .homepage-upper-zone .masthead-message {
    flex: 0 1 250px;
    order: 2;
    min-width: 170px;
    padding-inline-start: 20px;
    color: var(--brand-on-dark);
    border-inline-start: 3px solid var(--redesign-accent);
    direction: rtl;
    text-align: start;
}
html.public-site .homepage-upper-zone .masthead-message strong { color: var(--brand-on-dark); }
html.public-site .homepage-upper-zone .masthead-message span { color: rgba(255, 255, 255, .82); }
html.public-site .homepage-upper-zone .brand-mark {
    width: 250px;
    height: 112px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 20px;
}
html.public-site .homepage-upper-zone .brand img { max-width: 100%; max-height: 88px; }
html.public-site .homepage-upper-zone .main-nav { background: rgba(8, 15, 23, .95); border: 0; }
html.public-site .homepage-upper-zone .main-nav .nav-inner { justify-content: flex-start; }
html.public-site .homepage-upper-zone .breaking-bar {
    margin: 0;
    color: var(--brand-on-dark);
    background: rgba(8, 15, 23, .9);
    border: 0;
    border-block: 1px solid rgba(255, 255, 255, .16);
    border-radius: 0;
}
html.public-site .homepage-upper-zone .breaking-inner { min-height: 50px; }
html.public-site .homepage-upper-zone .breaking-inner > strong { background: var(--redesign-accent); }
html.public-site .homepage-upper-zone .breaking-track a { color: var(--brand-on-dark); }
html.public-site .homepage-upper-zone .breaking-track a.active { transform: translateY(0); }
html.public-site .homepage-upper-zone .t-newsroom-upper-content .t-newsroom-shell { padding-block: 24px 32px; }
html.public-site .homepage-upper-zone .top-stories-grid { margin-bottom: 0; }
html.public-site .homepage-lower-main { min-width: 0; background: var(--redesign-paper); }
html.public-site .homepage-lower-main .t-newsroom-lower-content .t-newsroom-shell { padding-block-start: 32px; }

html.public-site .header-search-trigger {
    width: 40px;
    min-height: 30px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--brand-on-dark);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
}
html.public-site .header-search-trigger:hover,
html.public-site .header-search-trigger:focus-visible { color: #fff; background: var(--redesign-accent); border-color: var(--redesign-accent); }

html.public-site .search-modal {
    width: min(620px, calc(100% - 32px));
    margin: auto;
    padding: 0;
    color: var(--redesign-ink);
    background: transparent;
    border: 0;
}
html.public-site .search-modal::backdrop { background: rgba(5, 12, 20, .68); }
html.public-site .search-modal-panel {
    position: relative;
    padding: clamp(28px, 5vw, 52px);
    background: var(--redesign-surface);
    border: 1px solid var(--redesign-line);
    border-top: 6px solid var(--redesign-accent);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(5, 12, 20, .28);
}
html.public-site .search-modal-close {
    position: absolute;
    inset-block-start: 16px;
    inset-inline-start: 18px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--redesign-ink);
    background: transparent;
    border: 1px solid var(--redesign-line);
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.6rem;
    line-height: 1;
}
html.public-site .search-modal-close:hover,
html.public-site .search-modal-close:focus-visible { color: #fff; background: var(--redesign-accent); border-color: var(--redesign-accent); }
html.public-site .search-modal-kicker { color: var(--redesign-accent-dark); font-size: .78rem; font-weight: 800; }
html.public-site .search-modal h2 { margin: 8px 0 24px; font-size: clamp(1.55rem, 3vw, 2.25rem); }
html.public-site .search-modal-form label { display: block; margin-bottom: 8px; font-size: .82rem; font-weight: 700; }
html.public-site .search-modal-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
html.public-site .search-modal-fields input { min-width: 0; min-height: 54px; padding-inline: 16px; color: var(--redesign-ink); background: var(--redesign-paper); border: 1px solid var(--redesign-line); outline: 0; }
html.public-site .search-modal-fields input:focus { border-color: var(--redesign-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--redesign-accent) 14%, transparent); }
html.public-site .search-modal-fields button { min-width: 96px; color: #fff; background: var(--redesign-accent); border: 0; cursor: pointer; font-weight: 800; }
html.public-site .search-modal-fields button:hover { background: var(--redesign-accent-dark); }

@media (max-width: 980px) {
    html.public-site .site-header .masthead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand toggle"; }
    html.public-site .site-header .masthead-content { display: none; }
    html.public-site .homepage-upper-zone .masthead { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand toggle" "content content"; gap: 12px 18px; padding-block: 14px; }
    html.public-site .homepage-upper-zone .masthead-content { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    html.public-site .homepage-upper-zone .homepage-masthead-ad { order: 1; }
    html.public-site .homepage-upper-zone .masthead-message { order: 2; flex: none; min-width: 0; padding: 8px 0 0; border-inline-start: 0; border-block-start: 3px solid var(--redesign-accent); text-align: center; }
    html.public-site .homepage-upper-zone .brand-mark { width: 220px; height: 94px; }
    html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame img { max-height: 120px; }
}

@media (max-width: 640px) {
    html.public-site .utility-inner { min-height: 36px; }
    html.public-site .header-search-trigger { width: 36px; }
    html.public-site .homepage-upper-zone .masthead { gap: 10px 12px; }
    html.public-site .homepage-upper-zone .brand-mark { width: 180px; height: 78px; padding: 10px 13px; border-radius: 16px; }
    html.public-site .homepage-upper-zone .brand img { max-height: 62px; }
    html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame img { max-height: 92px; }
    html.public-site .homepage-upper-zone .breaking-inner { min-height: 46px; grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
    html.public-site .homepage-upper-zone .breaking-inner > strong { padding-inline: 12px; font-size: .76rem; }
    html.public-site .search-modal-fields { grid-template-columns: 1fr; gap: 10px; }
    html.public-site .search-modal-fields button { min-height: 48px; }
}

/* Mobile stadium header: keep the utility controls, masthead, ad, and navigation in flow. */
@media (max-width: 767px) {
    html.public-site .site-header .utility-inner {
        width: calc(100% - 24px);
        min-height: 38px;
        justify-content: space-between;
        gap: 12px;
    }

    html.public-site .site-header .utility-inner > time { order: 1; }
    html.public-site .site-header .utility-inner > .header-search-trigger { order: 2; flex: 0 0 auto; }

    html.public-site .homepage-upper-zone .site-header[class*="header-template-"] .masthead {
        width: 100%;
        min-height: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 12px;
        margin: 0;
        padding: 14px 0 16px;
        background: transparent;
        border: 0;
    }

    html.public-site .site-header .masthead > .menu-toggle { display: none; }

    html.public-site .homepage-upper-zone .masthead .brand {
        width: min(210px, calc(100% - 24px));
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
    }

    html.public-site .homepage-upper-zone .brand-mark {
        width: 100%;
        height: auto;
        min-height: 0;
        display: block;
        flex: 0 1 auto;
        padding: 0;
        background: transparent;
        border: 0;
        border-radius: 0;
    }

    html.public-site .homepage-upper-zone .brand img {
        width: 100%;
        height: auto;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }

    html.public-site .homepage-upper-zone .masthead-content {
        width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 0;
        direction: rtl;
    }

    html.public-site .homepage-upper-zone .homepage-masthead-ad {
        width: calc(100% - 24px);
        max-width: 100%;
        min-width: 0;
        order: 1;
    }

    html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-slot {
        width: 100%;
        min-height: 0;
        height: auto;
        margin: 0;
        overflow: visible;
        background: transparent;
        border: 0;
    }

    html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame {
        width: 100%;
        min-height: 0;
        height: auto;
        overflow: hidden;
        background: transparent;
        border-radius: 14px;
    }

    html.public-site .homepage-upper-zone .homepage-masthead-ad .ad-frame img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
    }

    html.public-site .homepage-upper-zone .masthead-message { display: none; }

    html.public-site .site-header .main-nav {
        width: 100%;
        display: block;
        color: var(--brand-on-dark, var(--redesign-surface));
        background: var(--redesign-ink);
        border: 0;
    }

    html.public-site .site-header .main-nav .menu-toggle {
        width: min(calc(100% - 24px), var(--container));
        min-height: 48px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        margin-inline: auto;
        padding: 10px 0;
        color: var(--brand-on-dark, var(--redesign-surface));
        background: transparent;
        border: 0;
        border-block-end: 1px solid rgba(255, 255, 255, .16);
    }

    html.public-site .site-header .main-nav .menu-toggle > span:not(.sr-only) {
        width: 24px;
        height: 2px;
        margin: 0;
        background: var(--brand-on-dark, #fff);
    }

    html.public-site .site-header .main-nav .nav-inner {
        width: min(calc(100% - 24px), var(--container));
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        margin-inline: auto;
        overflow: visible;
        padding-block: 4px 8px;
    }

    html.public-site .site-header .main-nav.open .nav-inner { display: flex; }

    html.public-site .site-header .main-nav .nav-inner > a,
    html.public-site .site-header .main-nav .nav-item,
    html.public-site .site-header .main-nav .nav-item > a {
        width: 100%;
    }

    html.public-site .site-header .main-nav .nav-inner > a,
    html.public-site .site-header .main-nav .nav-item > a {
        min-height: 44px;
        justify-content: flex-start;
        padding-inline: 14px;
        color: var(--brand-on-dark, var(--redesign-surface));
        border-radius: 0;
    }

    html.public-site .site-header .main-nav .nav-inner > a:hover,
    html.public-site .site-header .main-nav .nav-inner > a.active,
    html.public-site .site-header .main-nav .nav-item > a:hover,
    html.public-site .site-header .main-nav .nav-item > a.active {
        color: var(--brand-on-dark, var(--redesign-surface));
        background: var(--redesign-accent);
    }

    html.public-site .site-header .main-nav .nav-item { flex-direction: column; }
}

/* Mobile lower-page cleanup: unavailable ads must not reserve space, while active ads stay intrinsic. */
@media (max-width: 767px) {
    html.public-site .ad-slot[hidden],
    html.public-site .site-ad:not(:has(.ad-slot)),
    html.public-site .site-ad:has(.ad-slot[hidden]) { display: none !important; }

    html.public-site body[data-site-template] .ad-slot {
        min-height: 0;
        height: auto;
        margin-block: 10px;
        padding: 0;
    }

    html.public-site body[data-site-template] .ad-slot .ad-frame {
        min-height: 0;
        height: auto;
        max-height: none;
        background: transparent;
    }

    html.public-site body[data-site-template] .ad-slot .ad-frame img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
    }

    html.public-site .footer-tags {
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        overflow: visible;
        padding-block: 10px 12px;
    }

    html.public-site .footer-tags strong {
        margin-inline-end: 0;
    }

    html.public-site .footer-tags a {
        flex: 0 1 auto;
        max-width: 100%;
        padding: 5px 10px;
        overflow-wrap: anywhere;
        white-space: normal;
    }

    html.public-site .site-footer { margin-top: 24px; }

    html.public-site .footer-bar {
        min-height: 0;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
        padding-block: 20px 16px;
    }

    html.public-site .footer-logo {
        width: min(100%, 190px);
        align-self: center;
        justify-content: center;
        margin-inline: auto;
    }

    html.public-site .footer-logo .brand-mark {
        width: 100%;
        height: auto;
        min-height: 0;
        flex: 0 1 auto;
        padding: 10px 14px;
        overflow: visible;
        background: var(--redesign-surface);
        border-radius: 14px;
    }

    html.public-site .footer-logo .brand-mark img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: contain;
    }

    html.public-site .footer-copy { margin: 0; }

    html.public-site .footer-nav {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 14px;
    }

    html.public-site .footer-nav a {
        min-width: 0;
        padding-block: 6px;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 380px) {
    html.public-site .footer-nav { grid-template-columns: 1fr; }
}