/* Snap News Layout — news styles — v1.0.1 — 2026-11-15 11:20 */
:root{--snl-accent:#C8102E;--snl-accent-dk:#A50E25;--snl-ink:#111;--snl-text:#1a1a1a;--snl-muted:#555;--snl-line:#e3e3e3;--snl-soft:#f4f4f4;--snl-serif:'Source Serif 4',Georgia,'Times New Roman',serif;--snl-sans:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
body.snl{margin:0;background:#fff;color:var(--snl-ink);font-family:var(--snl-sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
body.snl *,body.snl *::before,body.snl *::after{box-sizing:border-box}
.snl a:link,.snl a:visited{color:inherit;text-decoration:none}
.snl a:hover{color:var(--snl-accent-dk);text-decoration:underline}
.snl a:active{color:var(--snl-accent-dk)}
.snl a:focus-visible,.snl button:focus-visible,.snl input:focus-visible{outline:3px solid #E8A838;outline-offset:2px}
.snl img{max-width:100%;height:auto}
.snl-wrap{max-width:1200px;margin:0 auto;padding-left:20px;padding-right:20px}
.snl-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.snl-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:#111;color:#fff!important;padding:12px 16px}
.snl-skip:focus{left:8px;top:8px}
.snl-muted{color:var(--snl-muted)}

/* Top bar + header */
.snl-topbar{background:#111;color:#fff;font-size:13px}
.snl-topbar__inner{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px}
.snl .snl-topbar__link:link,.snl .snl-topbar__link:visited{color:#fff;font-weight:600}
.snl .snl-topbar__link:hover{color:#fff;text-decoration:underline}
.snl-header{border-bottom:1px solid #ddd;background:#fff}
.snl-header__inner{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:14px}
.snl-logo{display:flex;align-items:center;gap:14px}
.snl .snl-logo:hover{text-decoration:none}
.snl-logo__img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.snl-logo__mark{width:64px;height:64px;border-radius:50%;background:#111;display:flex;align-items:center;justify-content:center;flex:none}
.snl-logo__mark span{width:48px;height:48px;border-radius:50%;background:var(--snl-accent);color:#fff;display:flex;align-items:center;justify-content:center}
.snl-logo__text{display:flex;flex-direction:column}
.snl-logo__name{font-family:var(--snl-serif);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.5px;color:#111}
.snl-logo__tag{font-size:13px;color:var(--snl-muted);margin-top:6px}
.snl-search{display:flex;flex:0 1 320px;min-width:220px}
.snl-search input{flex:1;min-width:0;height:44px;border:1px solid #888;border-right:0;border-radius:4px 0 0 4px;padding:0 12px;font:inherit;font-size:15px;color:#111;background:#fff}
.snl-search button{width:48px;height:44px;border:0;border-radius:0 4px 4px 0;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.snl-search button:hover{background:var(--snl-accent-dk);color:#fff}
.snl-nav{border-top:3px solid var(--snl-accent)}
.snl-nav__inner{display:flex;gap:2px;overflow-x:auto;scrollbar-width:thin;padding-left:12px;padding-right:12px}
.snl .snl-nav__link:link,.snl .snl-nav__link:visited{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;font-weight:700;font-size:15px;white-space:nowrap;color:#111;background:transparent}
.snl .snl-nav__link:hover{color:#fff;background:#111;text-decoration:none}
.snl .snl-nav__link.is-active,.snl .snl-nav__link.is-active:hover{color:#fff;background:var(--snl-accent)}

/* Ticker */
.snl-ticker{background:var(--snl-soft);border-bottom:1px solid #ddd}
.snl-ticker__inner{display:flex;align-items:center;gap:14px;height:44px;overflow:hidden}
.snl-ticker__label{background:var(--snl-accent);color:#fff;font-weight:700;font-size:12px;letter-spacing:1px;text-transform:uppercase;padding:6px 10px;border-radius:3px;flex:none}
.snl-ticker__viewport{overflow:hidden;flex:1;min-width:0}
.snl-ticker__track{display:flex;gap:40px;white-space:nowrap;width:max-content;font-size:14px;font-weight:500;animation:snl-tick 60s linear infinite}
.snl-ticker__viewport:hover .snl-ticker__track,.snl-ticker__viewport:focus-within .snl-ticker__track{animation-play-state:paused}
@keyframes snl-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.snl-ticker__track{animation:none}.snl-ticker__viewport{overflow-x:auto}}

/* Main */
.snl-main{padding-top:28px;padding-bottom:48px}
.snl-empty{font-size:18px;color:var(--snl-muted);padding:40px 0}
.snl-kicker{display:inline-block;color:var(--snl-accent-dk)!important;font-weight:700;font-size:12px;letter-spacing:.8px;text-transform:uppercase}
.snl-time{font-size:12px;color:var(--snl-muted)}
.snl-img,.snl .snl-img{display:block;width:100%;height:100%;object-fit:cover;background:#ddd}
.snl-card__media>img,.snl-lead__media>img,.snl-row__media>img,.snl-listitem__media>img{height:100%!important}
.snl-img--empty{display:flex;align-items:center;justify-content:center;background:#111;color:#fff;font-family:var(--snl-serif);font-weight:700;font-size:18px;text-align:center;padding:8px}
.snl-img--empty span{border-bottom:3px solid var(--snl-accent)}

/* Top stories */
.snl-top{display:flex;flex-wrap:wrap;gap:28px;padding-bottom:32px;border-bottom:1px solid #ddd}
.snl-lead{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:10px}
.snl-lead__media{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:#ddd}
.snl-lead__title{margin:0;font-family:var(--snl-serif);font-weight:800;font-size:40px;line-height:1.12;letter-spacing:-.4px}
.snl-lead__dek{margin:0;font-size:18px;line-height:1.5;color:#333}
.snl-top__side{flex:1 1 340px;min-width:0;display:flex;flex-direction:column}
.snl-row{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--snl-line)}
.snl-row:first-child{padding-top:0}
.snl-row__media{flex:none;width:120px;height:80px;border-radius:4px;overflow:hidden;background:#ddd}
.snl-row__media .snl-img--empty{font-size:12px}
.snl-row__body{display:flex;flex-direction:column;gap:5px;min-width:0}
.snl-row__title{margin:0;font-family:var(--snl-serif);font-weight:700;font-size:18px;line-height:1.25}
