/* Header geometry and motion measured from the published Foxiz template. */
@font-face{font-family:Inter;src:url('/assets/theme/fonts/inter-normal-latin.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/theme/fonts/inter-normal-latin-ext.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
.site-header{border-bottom:0;--header-ease:cubic-bezier(.32,.74,.57,1)}
.site-logo{transform:translateY(-2px)}
.country-nav{height:auto;border-top:0;border-bottom:1px solid var(--line)}
/* The list of countries is moved sideways where it is wider than its place, whatever the
   language and the screen, and fades at the side where more of it waits (the script marks
   which). The same goes for the sections in the menu bar. */
.country-nav .wrap{height:auto;width:min(1400px,calc(100% - 40px));padding:6px 0;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,var(--fade-start,#000),#000 32px,#000 calc(100% - 32px),var(--fade-end,#000));mask-image:linear-gradient(to right,var(--fade-start,#000),#000 32px,#000 calc(100% - 32px),var(--fade-end,#000))}
.country-nav .wrap[data-more-start]{--fade-start:transparent}
.country-nav .wrap[data-more-end]{--fade-end:transparent}
.country-nav .wrap[data-more-start],.country-nav .wrap[data-more-end]{cursor:grab}
.country-nav .wrap.is-dragging,.header-nav .primary-nav.is-dragging{cursor:grabbing}
.country-nav .wrap::-webkit-scrollbar{display:none}
.country-mark{flex:0 0 auto;width:17.796875px;height:20.390625px;margin:0 12px 0 0;color:#777;background-color:currentColor;-webkit-mask:var(--i-trending) center/15.2px 15.2px no-repeat;mask:var(--i-trending) center/15.2px 15.2px no-repeat}
.country-nav nav{flex:0 0 auto;max-width:none;overflow:visible}
.country-nav .wrap{overscroll-behavior-x:contain}
.country-nav ul{gap:12px}
.country-nav li{display:flex;align-items:center;flex:0 0 auto}
.country-nav li+li{border:0}
.country-nav li:not(:last-child):after{content:'|';margin-left:12px;color:#88888822;font:700 11.2px/1.438 var(--sans)}
.country-nav a{padding:0;font:500 12px/1.438 var(--sans);transition:color .2s var(--header-ease)}
.country-nav a:hover{color:var(--brand-accent-color)}
.header-actions{gap:15px}
.search-toggle{width:20px;height:42px;padding:0}
.search-toggle img{width:20px;height:20px}
.dark-toggle{position:relative;width:40px;height:32px;padding:0;flex:none}
.dark-toggle:before{content:'';position:absolute;inset:9px 0;border-radius:14px;background:#88888826}
.dark-toggle .sun,.dark-toggle .moon{position:absolute;left:0;top:4px;width:24px;height:24px;display:grid;place-items:center;background:var(--paper);color:var(--ink);border-radius:50%;box-shadow:0 1px 4px #0002;font-size:18px;line-height:1;transition:transform .2s var(--header-ease),opacity .2s var(--header-ease)}
.dark-toggle .moon{opacity:0}
:root[data-theme=dark] .dark-toggle .sun{display:grid;opacity:0;transform:translateX(16px)}
:root[data-theme=dark] .dark-toggle .moon{display:grid;opacity:1;transform:translateX(16px)}
@media(min-width:1280px){
 /* The two rules run the full width of the page, past the 1400px column. */
 .header-nav{height:44px;border-block:1px solid var(--line);border-image:linear-gradient(var(--line),var(--line)) 1/1px 0/0 100vw;align-items:center;overflow:visible}
 .header-nav:before{content:'';display:block;width:18px;height:14px;color:#6ea4bd;flex:0 0 18px;background-color:currentColor;-webkit-mask:var(--i-broadcast) center/16.5px 16.5px no-repeat;mask:var(--i-broadcast) center/16.5px 16.5px no-repeat}
 .header-nav .primary-nav{min-width:0;max-width:calc(100% - 18px);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
 .header-nav .primary-nav::-webkit-scrollbar{display:none}
 .header-nav .primary-nav>ul{height:42px;min-width:max-content}
 /* The fade lies over the bar and not in a mask on the list: a mask would hide the panels that
    open under it. They are placed by the bar itself, so the list's own edges do not cut them. */
 .header-nav:after{content:'';position:absolute;top:0;bottom:0;left:18px;right:0;z-index:1;pointer-events:none;background:linear-gradient(to right,var(--fade-start,transparent),transparent 32px),linear-gradient(to left,var(--fade-end,transparent),transparent 32px)}
 .header-nav[data-more-start]{--fade-start:var(--paper)}
 .header-nav[data-more-end]{--fade-end:var(--paper)}
 .header-nav .primary-nav>ul>li{height:42px}
 .header-nav .primary-nav>ul>li>a{height:42px;padding:0 12px;font:600 14px/21px var(--sans);letter-spacing:-.02em;white-space:nowrap;transition:color .2s var(--header-ease)}
 .header-nav .primary-nav>ul>li>a:hover{background:transparent}
 .header-nav .primary-nav>ul>li>a:after{content:'';display:inline-block;width:12.8px;height:12.8px;border:0;margin:0 0 0 2px;vertical-align:-2px;background-color:currentColor;-webkit-mask:var(--i-chevron-down) center/var(--f-chevron-down) no-repeat;mask:var(--i-chevron-down) center/var(--f-chevron-down) no-repeat;transform:none;transition:transform .2s var(--header-ease)}
 .header-nav .primary-nav>ul>li.is-menu-open>a:after{transform:rotate(180deg)}
 .header-nav .mega-category,.header-nav li:hover>.mega-category,.header-nav li:focus-within>.mega-category{
  display:block;position:absolute;top:calc(100% - 1px);left:20px;right:20px;padding:20px 20px 30px;border:0;border-radius:0;background:var(--paper);box-shadow:0 4px 30px #00000012;z-index:20;
  visibility:hidden;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .2s var(--header-ease),transform .2s var(--header-ease),visibility 0s linear .2s;
 }
 .header-nav li.is-menu-open>.mega-category{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0);transition-delay:0s}
 .mega-heading{margin:0 0 20px}
 .mega-heading strong{font:700 19px/1.368 var(--sans);letter-spacing:normal}
 .mega-heading a{padding:0;height:auto;color:#777;font:400 13px/1.7 var(--sans);letter-spacing:0}
 .mega-cards{gap:20px;min-height:0;align-items:start}
 .mega-cards:empty:before{content:none}
 .mega-card{min-width:0}
 .mega-card>a{height:auto;aspect-ratio:5/3;overflow:hidden;background:var(--quiet)}
 .mega-card img,.mega-card .image-placeholder{width:100%;height:100%;aspect-ratio:5/3;object-fit:cover}
 .mega-card h3{font:700 19px/1.368 var(--sans);letter-spacing:normal;margin:7px 0}
 .mega-card h3 a{font:inherit;letter-spacing:inherit}
 .mega-card p{font:400 15px/1.7 var(--sans);color:#555;margin:0 0 7px}
 .mega-card time{display:block;font:400 13px/1.7 var(--sans);color:#777;margin:0}
 .mega-card a:hover,.mega-heading a:hover{color:var(--brand-accent-color);background:none}
 :root[data-theme=dark] .mega-card p,:root[data-theme=dark] .mega-heading a,:root[data-theme=dark] .mega-card time{color:var(--muted)}
}
@media(min-width:1280px) and (max-width:1359px){.header-nav .primary-nav>ul>li>a{padding-inline:5px;font-size:13px}.header-nav .primary-nav>ul{justify-content:space-between}.header-nav .primary-nav{flex:1}.mega-card h3{font-size:16px}.mega-card p{font-size:13px}}
@media(max-width:1279px){.site-promo,.header-nav{display:none}.header-top{height:54px}.menu-toggle{display:grid}.header-actions{gap:8px}.country-nav .wrap{width:calc(100% - 40px)}.mobile-nav.is-open{display:block;padding:0 20px 18px}.mobile-nav .primary-nav ul{display:flex;flex-wrap:wrap;min-width:0;justify-content:flex-start}.mobile-nav .primary-nav{overflow:visible}.mobile-search{display:flex;gap:8px;padding-top:12px}.mobile-search input{min-width:0;flex:1;padding:8px 10px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}}
@media(max-width:600px){.header-actions{gap:5px}.header-top{gap:8px}.site-logo img{width:min(160px,42vw)}.menu-toggle{width:30px}.country-nav a{padding:0}.country-mark{margin-right:12px}}
@media(prefers-reduced-motion:reduce){.header-nav .mega-category,.header-nav li:hover>.mega-category,.header-nav li:focus-within>.mega-category,.header-nav .primary-nav>ul>li>a:after,.dark-toggle .sun,.dark-toggle .moon{transition:none}}
/* Foxiz search: a compact popup anchored to the header icon. */
.header-search-control{position:relative;flex:none;height:42px}
.header-search-control .desktop-search{display:block;inset:auto;right:0;top:calc(100% - 1px);width:340px;max-width:calc(100vw - 20px);background:var(--paper);border:0;border-radius:0;box-shadow:0 4px 30px #0000001f;z-index:50;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(20px);transition:opacity .2s var(--header-ease),transform .2s var(--header-ease),visibility 0s linear .2s}
.header-search-control .desktop-search.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition-delay:0s}
.desktop-search .header-search-form{padding:5px}
.header-search-control .desktop-search form{display:block;width:100%;height:auto;margin:0}
.desktop-search .search-form-inner{display:flex;align-items:center;min-width:0}
.desktop-search .search-icon{display:flex;position:static;clip:auto;flex:0 0 36px}
.desktop-search .search-icon img{width:16px;height:16px;margin-inline:10px}
.desktop-search .search-text{display:block;flex:1;min-width:0}
.header-search-control .desktop-search input{display:block;width:100%;height:auto;min-width:0;border:0;background:transparent;color:var(--ink);padding:8.4px 0;font:400 14px/1.7 var(--sans);outline:none}
.header-search-control .rb-search-submit{flex:0 0 40px;width:40px;height:40px;padding:0 10px 0 0;background:transparent;color:var(--ink);text-transform:none;letter-spacing:0}

.desktop-search .rb-search-submit:hover{color:var(--brand-accent-color)}
:root[data-theme=dark] .desktop-search .search-icon img{filter:invert(1)}
@media(max-width:600px){.header-search-control{display:none}}
@media(prefers-reduced-motion:reduce){.header-search-control .desktop-search{transition:none}}
/* Match the subscription form's existing input size and type. */
.subscribe-form select{display:block;width:100%;height:43px;margin-top:6px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:400 15px var(--sans);padding:9px;text-transform:none;letter-spacing:0}

/* Foxiz uses smaller country dividers on tablets and phones. */
@media(max-width:1024px){.country-nav li:not(:last-child):after{font-size:10.5px}}
@media(max-width:767px){.country-mark{width:16.1875px;font-size:11.2px;line-height:17.109375px}}

/* Tamil in its own font is wider than the row at every width: its menu is set tighter, so that
   every section shows. */
@media(min-width:1280px){:root:lang(ta) .header-nav .primary-nav>ul>li>a{padding-inline:5px;font-size:13px}}
@media(min-width:1280px) and (max-width:1359px){:root:lang(ta) .header-nav .primary-nav>ul>li>a{padding-inline:3px}}