/* Three Points London: brand layer over the frivizn template (MIT). */
:root {
  --tp-navy: #0a1630;
  --tp-navy-2: #13254a;
  --tp-lime: #c6f432;
  --tp-red: #e4002b;
  --anti-flash-white: #f4f5f7;
  --dark-medium-gray: #0a1630;
}
body { background: var(--anti-flash-white); }
h1, h2, h3, .logo a { font-family: "Archivo", "Exo 2", sans-serif;  }

/* ticker */
.tp-ticker { display: flex; align-items: center; background: var(--tp-lime); color: var(--tp-navy); font: 600 13px/1 "Open Sans", sans-serif; overflow: hidden; white-space: nowrap; }
.tp-ticker b { background: var(--tp-red); color: #fff; padding: 9px 14px; letter-spacing: .08em; flex: none; }
.tp-ticker div { overflow: hidden; flex: 1; }
.tp-ticker span { display: inline-block; padding-left: 100%; animation: tp-scroll 38s linear infinite; }
@keyframes tp-scroll { to { transform: translateX(-100%); } }

/* header */
header .nav-section, .nav-section { background: var(--tp-navy) !important; }
.logo a { display: flex; align-items: center; gap: 8px; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; color: #fff; }
.logo small { font-size: .62rem; letter-spacing: .3em; color: var(--tp-lime); margin-left: 2px; font-weight: 700; }
.tp-mark { display: inline-grid; place-items: center; width: 30px; height: 30px; background: var(--tp-lime); color: var(--tp-navy); border-radius: 50%; font-size: 1rem; }
.nav-links a:hover { color: var(--tp-lime); }

/* hero + top stories images */
.latest-news .headline { background-image: linear-gradient(0deg, rgba(10,22,48,.85), rgba(10,22,48,0) 60%), url(../img/hero.jpg) !important; min-height: 320px; }
.top-stories .headline-1 { background-image: linear-gradient(0deg, rgba(10,22,48,.9), transparent 70%), url(../img/match3.jpg) !important; }
.top-stories .headline-2 { background-image: linear-gradient(0deg, rgba(10,22,48,.9), transparent 70%), url(../img/fans1.jpg) !important; }
.top-stories .headline-3 { background-image: linear-gradient(0deg, rgba(10,22,48,.9), transparent 70%), url(../img/stadium2.jpg) !important; }
.headline { background-size: cover !important; background-position: center !important; }
.headline p { background: var(--tp-red); letter-spacing: .08em; }
.latest-news .headline h1 { font-size: 1.7rem; line-height: 1.15; max-width: 640px; padding: 0 18px 18px; }
.headline h1 { text-transform: none !important; }

/* section labels */
.top-stories h2, .world h2, .politics h2, .business h2, .sport h2, .entertainment h2, .more h2, .tp-fixtures h2, .sidebar h2 {
  background: transparent !important; color: var(--tp-navy); border-bottom: 3px solid var(--tp-navy);
  padding: 8px 0 !important; font-size: .85rem !important; letter-spacing: .12em; position: relative;
}
.world h2::after, .politics h2::after, .business h2::after, .sport h2::after, .entertainment h2::after, .more h2::after, .tp-fixtures h2::after {
  content: ""; position: absolute; left: 0; bottom: -3px; width: 48px; height: 3px; background: var(--tp-red);
}
.story h3, .more-headline h3 { text-transform: none !important; font-size: 1rem; line-height: 1.3; }
.story a:hover h3, .more-headline a:hover h3 { color: var(--tp-red); }
.story img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.story p.exact-time, .more-headline p.exact-time { color: #6b7280; }

/* fixtures + newsletter */
.tp-fixtures { margin: 10px; }
.tp-fixtures h2 { margin: 0 0 6px; }
.tp-fixtures ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tp-fixtures li { display: block; background: #fff; padding: 10px 12px; font-size: .92rem; border-top: 3px solid var(--tp-lime); }
.tp-fixtures li span { display: block; color: #6b7280; font-size: .75rem; margin-bottom: 3px; }
.tp-news { background: var(--tp-navy); color: #fff; padding: 16px; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.tp-news p { width: 100%; margin: 0 0 6px; font-size: .9rem; }
.tp-news input { flex: 1; min-width: 160px; padding: 10px; border: 0; }
.tp-news button { background: var(--tp-lime); color: var(--tp-navy); border: 0; padding: 10px 16px; font-weight: 700; cursor: pointer; }

/* footer */
.footer-links, footer { background: var(--tp-navy) !important; }
footer p { color: #aeb6c8; }
.footer-links a:hover { color: var(--tp-lime); }

/* article */
.article h2 { text-transform: none !important; font-size: 2rem; line-height: 1.15; color: var(--tp-navy); }
.main-article .headline { background-image: url(../img/match1.jpg) !important; min-height: 360px; }
.article p { font-size: 1.05rem; line-height: 1.7; }
.form-container input[type=submit] { background: var(--tp-navy); }
.social-media-links, .social-media-links li a { background: var(--tp-navy-2) !important; }
.social-media-links li a:hover { background: var(--tp-red) !important; }
.headline h1 { text-shadow: 0 2px 8px rgba(0,0,0,.6); }